1
2
3
{
  "active": true
}

1
<div class="a-loader {{ active ? " is-active" }}" aria-label="Loading..."></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@keyframes beating {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.a-loader {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: currentColor;
  .is-loading &,
  &.is-active {
    animation: beating 0.3s alternate infinite $bezier--miguel;
  }
}