src/components/Spinner/Spinner.module.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

@use "@styles/abstracts/functions" as fun;

.wrapper {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2xs);
  margin-bottom: var(--spacing-md);
}

.ball {
  width: fun.convert-px(8);
  height: fun.convert-px(8);
  background: linear-gradient(
    to right,
    var(--color-primary-light) 0%,
    var(--color-primary-lighter) 100%
  );
  border-radius: 50%;
  animation: spinner 1.4s infinite ease-in-out both;

  &:first-child {
    animation-delay: -0.32s;
  }

  &:nth-child(2) {
    animation-delay: -0.16s;
  }
}

.text {
  margin-left: var(--spacing-xs);
  text-align: center;
}

@keyframes spinner {
  0%,
  80%,
  100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}