-
Notifications
You must be signed in to change notification settings - Fork 0
/
spinner.scss
executable file
·77 lines (65 loc) · 1.65 KB
/
spinner.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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
.spinner-1 {
width: 40px;
height: 40px;
background-color: var(--default-c);
margin: 50px auto;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
@keyframes sk-rotateplane {
0% { transform: perspective(120px); }
50% { transform: perspective(120px) rotateY(180deg); }
100% { transform: perspective(120px) rotateY(180deg) rotateX(180deg); }
}
@keyframes sk-rotateplane {
0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); }
}
.spinner-2 {
text-align: center;
> div {
width: 18px;
height: 18px;
background-color: var(--default-c);
border-radius: 100%;
display: inline-block;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.bounce1 {
animation-delay: -0.32s;
}
.bounce2 {
animation-delay: -0.16s;
}
}
@keyframes sk-bouncedelay {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1.0); }
}
@keyframes sk-bouncedelay {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1.0); }
}
.spinner-3 {
width: 40px;
height: 40px;
margin: 50px auto;
background-color: var(--default-c);
border-radius: 100%;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@keyframes sk-scaleout {
0% { transform: scale(0) }
100% {
transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
transform: scale(0);
} 100% {
transform: scale(1.0);
opacity: 0;
}
}