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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
h2.sectionNameType {
margin: 0;
font-size: 1.3em;
@media (--breakpoint-not-small) {
font-size: 1.5em;
}
span:nth-child(2) {
font-size: 12px;
color: #777;
font-weight: normal;
margin: 0 0.3em;
}
}
/**
* loading dots
*
* light
* dot color is #000 (black)
*
* transparency change:
* dot1 dot2 do3
* phase1 0.1 0.3 0.5
* phase2 0.5 0.1 0.3
* phase3 0.3 0.5 0.1
*
* dark
* dot color is #fff (white)
*
* transparency change:
* dot1 dot2 do3
* phase1 0.5 0.3 0.1
* phase2 0.1 0.5 0.3
* phase3 0.3 0.1 0.5
*
*/
:global {
body.light {
/*
* --loading-dot-{dot-index}-{dot-keyframe-phase}
*/
--loading-dot-1-1: rgba(0, 0, 0, 0.1);
--loading-dot-1-2: rgba(0, 0, 0, 0.5);
--loading-dot-1-3: rgba(0, 0, 0, 0.3);
--loading-dot-2-1: rgba(0, 0, 0, 0.3);
--loading-dot-2-2: rgba(0, 0, 0, 0.1);
--loading-dot-2-3: rgba(0, 0, 0, 0.5);
--loading-dot-3-1: rgba(0, 0, 0, 0.5);
--loading-dot-3-2: rgba(0, 0, 0, 0.3);
--loading-dot-3-3: rgba(0, 0, 0, 0.1);
}
body.dark {
--loading-dot-1-1: rgba(255, 255, 255, 0.5);
--loading-dot-1-2: rgba(255, 255, 255, 0.1);
--loading-dot-1-3: rgba(255, 255, 255, 0.3);
--loading-dot-2-1: rgba(255, 255, 255, 0.3);
--loading-dot-2-2: rgba(255, 255, 255, 0.5);
--loading-dot-2-3: rgba(255, 255, 255, 0.1);
--loading-dot-3-1: rgba(255, 255, 255, 0.1);
--loading-dot-3-2: rgba(255, 255, 255, 0.3);
--loading-dot-3-3: rgba(255, 255, 255, 0.5);
}
}
.loadingDot,
.loadingDot:before,
.loadingDot:after {
display: inline-block;
vertical-align: middle;
width: 6px;
height: 6px;
border-radius: 50%;
font-size: 0;
}
.loadingDot {
$d: 1s;
position: relative;
background-color: var(--loading-dot-2-1);
animation: dot2 $d step-start infinite;
&:before {
content: '';
position: absolute;
left: -12px;
background-color: var(--loading-dot-1-1);
animation: dot1 $d step-start infinite;
}
&:after {
content: '';
position: absolute;
right: -12px;
background-color: var(--loading-dot-3-1);
animation: dot3 $d step-start infinite;
}
}
/* prettier-ignore */
@keyframes dot1 {
0%, 100% { background-color: var(--loading-dot-1-1) }
33% { background-color: var(--loading-dot-1-2) }
66% { background-color: var(--loading-dot-1-3) }
}
/* prettier-ignore */
@keyframes dot2 {
0%, 100% { background-color: var(--loading-dot-2-1) }
33% { background-color: var(--loading-dot-2-2) }
66% { background-color: var(--loading-dot-2-3) }
}
/* prettier-ignore */
@keyframes dot3 {
0%, 100% { background-color: var(--loading-dot-3-1) }
33% { background-color: var(--loading-dot-3-2) }
66% { background-color: var(--loading-dot-3-3) }
}
|
