244 lines
4.8 KiB
CSS
244 lines
4.8 KiB
CSS
.blinking-cursor{
|
|
animation:blinkingCursor 1.25s infinite;
|
|
}
|
|
@keyframes blinkingCursor{
|
|
0%{ color: transparent; }
|
|
24%{ color: transparent; }
|
|
25%{ color: #ccc; }
|
|
75%{ color: #ccc; }
|
|
76%{ color: transparent; }
|
|
100%{ color: transparent; }
|
|
}
|
|
|
|
.loader {
|
|
position: absolute
|
|
}
|
|
|
|
.loader.pipe {
|
|
top: 5px;
|
|
font-size: 12px;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.loader-0-3 {
|
|
animation:loader0-3 0.5s infinite;
|
|
}
|
|
@keyframes loader0-3 {
|
|
0%{ color: #ccc; }
|
|
24%{ color: #ccc; }
|
|
25%{ color: transparent; }
|
|
100%{ color: transparent; }
|
|
}
|
|
|
|
.loader-1-3 {
|
|
animation:loader1-3 0.5s infinite;
|
|
}
|
|
@keyframes loader1-3 {
|
|
0%{ color: transparent; }
|
|
24%{ color: transparent; }
|
|
25%{ color: #ccc; }
|
|
49%{ color: #ccc; }
|
|
50%{ color: transparent; }
|
|
100%{ color: transparent; }
|
|
}
|
|
|
|
.loader-2-3 {
|
|
animation:loader2-3 0.5s infinite;
|
|
}
|
|
@keyframes loader2-3 {
|
|
0%{ color: transparent; }
|
|
49%{ color: transparent; }
|
|
50%{ color: #ccc; }
|
|
74%{ color: #ccc; }
|
|
75%{ color: transparent; }
|
|
100%{ color: transparent; }
|
|
}
|
|
|
|
.loader-3-3 {
|
|
animation:loader3-3 0.5s infinite;
|
|
}
|
|
@keyframes loader3-3 {
|
|
0%{ color: transparent; }
|
|
74%{ color: transparent; }
|
|
75%{ color: #ccc; }
|
|
100%{ color: #ccc; }
|
|
}
|
|
|
|
/* <span class="blinking-cursor">▊</span> */
|
|
|
|
.loader-0-9 {
|
|
animation:loader0-9 1s infinite;
|
|
}
|
|
@keyframes loader0-9 {
|
|
0%{ color: #ccc; }
|
|
9%{ color: #ccc; }
|
|
10%{ color: transparent; }
|
|
100%{ color: transparent; }
|
|
}
|
|
|
|
.loader-1-9 {
|
|
animation:loader1-9 1s infinite;
|
|
}
|
|
@keyframes loader1-9 {
|
|
0%{ color: transparent; }
|
|
9%{ color: transparent; }
|
|
10%{ color: #ccc; }
|
|
19%{ color: #ccc; }
|
|
20%{ color: transparent; }
|
|
100%{ color: transparent; }
|
|
}
|
|
|
|
.loader-2-9 {
|
|
animation:loader2-9 1s infinite;
|
|
}
|
|
@keyframes loader2-9 {
|
|
0%{ color: transparent; }
|
|
19%{ color: transparent; }
|
|
20%{ color: #ccc; }
|
|
29%{ color: #ccc; }
|
|
30%{ color: transparent; }
|
|
100%{ color: transparent; }
|
|
}
|
|
|
|
.loader-3-9 {
|
|
animation:loader3-9 1s infinite;
|
|
}
|
|
@keyframes loader3-9 {
|
|
0%{ color: transparent; }
|
|
29%{ color: transparent; }
|
|
30%{ color: #ccc; }
|
|
39%{ color: #ccc; }
|
|
40%{ color: transparent; }
|
|
100%{ color: transparent; }
|
|
}
|
|
|
|
.loader-4-9 {
|
|
animation:loader4-9 1s infinite;
|
|
}
|
|
@keyframes loader4-9 {
|
|
0%{ color: transparent; }
|
|
39%{ color: transparent; }
|
|
40%{ color: #ccc; }
|
|
49%{ color: #ccc; }
|
|
50%{ color: transparent; }
|
|
100%{ color: transparent; }
|
|
}
|
|
|
|
|
|
.loader-5-9 {
|
|
animation:loader5-9 1s infinite;
|
|
}
|
|
@keyframes loader5-9 {
|
|
0%{ color: transparent; }
|
|
49%{ color: transparent; }
|
|
50%{ color: #ccc; }
|
|
59%{ color: #ccc; }
|
|
60%{ color: transparent; }
|
|
100%{ color: transparent; }
|
|
}
|
|
|
|
.loader-6-9 {
|
|
animation:loader6-9 1s infinite;
|
|
}
|
|
@keyframes loader6-9 {
|
|
0%{ color: transparent; }
|
|
59%{ color: transparent; }
|
|
60%{ color: #ccc; }
|
|
69%{ color: #ccc; }
|
|
70%{ color: transparent; }
|
|
100%{ color: transparent; }
|
|
}
|
|
|
|
.loader-7-9 {
|
|
animation:loader7-9 1s infinite;
|
|
}
|
|
@keyframes loader7-9 {
|
|
0%{ color: transparent; }
|
|
69%{ color: transparent; }
|
|
70%{ color: #ccc; }
|
|
79%{ color: #ccc; }
|
|
80%{ color: transparent; }
|
|
100%{ color: transparent; }
|
|
}
|
|
|
|
.loader-8-9 {
|
|
animation:loader8-9 1s infinite;
|
|
}
|
|
@keyframes loader8-9 {
|
|
0%{ color: transparent; }
|
|
79%{ color: transparent; }
|
|
80%{ color: #ccc; }
|
|
89%{ color: #ccc; }
|
|
90%{ color: transparent; }
|
|
100%{ color: transparent; }
|
|
}
|
|
|
|
.loader-9-9 {
|
|
animation:loader9-9 1s infinite;
|
|
}
|
|
@keyframes loader9-9 {
|
|
0%{ color: transparent; }
|
|
89%{ color: transparent; }
|
|
90%{ color: #ccc; }
|
|
100%{ color: #ccc; }
|
|
}
|
|
|
|
/* 0-4 */
|
|
|
|
|
|
.loader-0-4 {
|
|
animation:loader0-4 0.5s infinite;
|
|
}
|
|
@keyframes loader0-4 {
|
|
0%{ color: #ccc; }
|
|
19%{ color: #ccc; }
|
|
20%{ color: transparent; }
|
|
100%{ color: transparent; }
|
|
}
|
|
|
|
.loader-1-4 {
|
|
animation:loader1-4 0.5s infinite;
|
|
}
|
|
@keyframes loader1-4 {
|
|
0%{ color: transparent; }
|
|
19%{ color: transparent; }
|
|
20%{ color: #ccc; }
|
|
39%{ color: #ccc; }
|
|
40%{ color: transparent; }
|
|
100%{ color: transparent; }
|
|
}
|
|
|
|
.loader-2-4 {
|
|
animation:loader2-4 0.5s infinite;
|
|
}
|
|
@keyframes loader2-4 {
|
|
0%{ color: transparent; }
|
|
39%{ color: transparent; }
|
|
40%{ color: #ccc; }
|
|
59%{ color: #ccc; }
|
|
60%{ color: transparent; }
|
|
100%{ color: transparent; }
|
|
}
|
|
|
|
.loader-3-4 {
|
|
animation:loader3-4 0.5s infinite;
|
|
}
|
|
@keyframes loader3-4 {
|
|
0%{ color: transparent; }
|
|
59%{ color: transparent; }
|
|
60%{ color: #ccc; }
|
|
79%{ color: #ccc; }
|
|
80%{ color: transparent; }
|
|
100%{ color: transparent; }
|
|
}
|
|
|
|
.loader-4-4 {
|
|
animation:loader4-4 0.5s infinite;
|
|
}
|
|
@keyframes loader4-4 {
|
|
0%{ color: transparent; }
|
|
79%{ color: transparent; }
|
|
80%{ color: #ccc; }
|
|
100%{ color: #ccc; }
|
|
}
|