talos

1
//
2
// Rotating border
3
//
4

5
@keyframes spinner-border {
6
  to { transform: rotate(360deg); }
7
}
8

9
.spinner-border {
10
  display: inline-block;
11
  width: $spinner-width;
12
  height: $spinner-height;
13
  vertical-align: $spinner-vertical-align;
14
  border: $spinner-border-width solid currentColor;
15
  border-right-color: transparent;
16
  // stylelint-disable-next-line property-disallowed-list
17
  border-radius: 50%;
18
  animation: .75s linear infinite spinner-border;
19
}
20

21
.spinner-border-sm {
22
  width: $spinner-width-sm;
23
  height: $spinner-height-sm;
24
  border-width: $spinner-border-width-sm;
25
}
26

27
//
28
// Growing circle
29
//
30

31
@keyframes spinner-grow {
32
  0% {
33
    transform: scale(0);
34
  }
35
  50% {
36
    opacity: 1;
37
    transform: none;
38
  }
39
}
40

41
.spinner-grow {
42
  display: inline-block;
43
  width: $spinner-width;
44
  height: $spinner-height;
45
  vertical-align: $spinner-vertical-align;
46
  background-color: currentColor;
47
  // stylelint-disable-next-line property-disallowed-list
48
  border-radius: 50%;
49
  opacity: 0;
50
  animation: .75s linear infinite spinner-grow;
51
}
52

53
.spinner-grow-sm {
54
  width: $spinner-width-sm;
55
  height: $spinner-height-sm;
56
}
57

58
@if $enable-prefers-reduced-motion-media-query {
59
  @media (prefers-reduced-motion: reduce) {
60
    .spinner-border,
61
    .spinner-grow {
62
      animation-duration: 1.5s;
63
    }
64
  }
65
}
66