forked from kamba4/sunders
179 lines
3.1 KiB
CSS
179 lines
3.1 KiB
CSS
.spinner-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 360px;
|
|
}
|
|
|
|
@keyframes spinner1 {
|
|
0% { opacity: 1; }
|
|
5% { opacity: 1; }
|
|
10% { opacity: 0.2; }
|
|
90% { opacity: 0.2; }
|
|
95% { opacity: 1; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
@keyframes spinner2 {
|
|
0% { opacity: 0.2; }
|
|
5% { opacity: 1; }
|
|
10% { opacity: 1; }
|
|
15% { opacity: 0.2; }
|
|
85% { opacity: 0.2; }
|
|
90% { opacity: 1; }
|
|
95% { opacity: 1; }
|
|
100% { opacity: 0.2; }
|
|
}
|
|
|
|
@keyframes spinner3 {
|
|
0% { opacity: 0.2; }
|
|
5% { opacity: 0.2; }
|
|
10% { opacity: 1; }
|
|
15% { opacity: 1; }
|
|
20% { opacity: 0.2; }
|
|
80% { opacity: 0.2; }
|
|
85% { opacity: 1; }
|
|
90% { opacity: 1; }
|
|
95% { opacity: 0.2; }
|
|
100% { opacity: 0.2; }
|
|
}
|
|
|
|
@keyframes spinner4 {
|
|
0% { opacity: 0.2; }
|
|
10% { opacity: 0.2; }
|
|
15% { opacity: 1; }
|
|
20% { opacity: 1; }
|
|
25% { opacity: 0.2; }
|
|
75% { opacity: 0.2; }
|
|
80% { opacity: 1; }
|
|
85% { opacity: 1; }
|
|
90% { opacity: 0.2; }
|
|
100% { opacity: 0.2; }
|
|
}
|
|
|
|
@keyframes spinner5 {
|
|
0% { opacity: 0.2; }
|
|
15% { opacity: 0.2; }
|
|
20% { opacity: 1; }
|
|
25% { opacity: 1; }
|
|
30% { opacity: 0.2; }
|
|
70% { opacity: 0.2; }
|
|
75% { opacity: 1; }
|
|
80% { opacity: 1; }
|
|
85% { opacity: 0.2; }
|
|
100% { opacity: 0.2; }
|
|
}
|
|
|
|
@keyframes spinner6 {
|
|
0% { opacity: 0.2; }
|
|
20% { opacity: 0.2; }
|
|
25% { opacity: 1; }
|
|
30% { opacity: 1; }
|
|
35% { opacity: 0.2; }
|
|
65% { opacity: 0.2; }
|
|
70% { opacity: 1; }
|
|
75% { opacity: 1; }
|
|
80% { opacity: 0.2; }
|
|
100% { opacity: 0.2; }
|
|
}
|
|
|
|
@keyframes spinner7 {
|
|
0% { opacity: 0.2; }
|
|
25% { opacity: 0.2; }
|
|
30% { opacity: 1; }
|
|
35% { opacity: 1; }
|
|
40% { opacity: 0.2; }
|
|
60% { opacity: 0.2; }
|
|
65% { opacity: 1; }
|
|
70% { opacity: 1; }
|
|
75% { opacity: 0.2; }
|
|
100% { opacity: 0.2; }
|
|
}
|
|
|
|
@keyframes spinner8 {
|
|
0% { opacity: 0.2; }
|
|
30% { opacity: 0.2; }
|
|
35% { opacity: 1; }
|
|
40% { opacity: 1; }
|
|
45% { opacity: 0.2; }
|
|
55% { opacity: 0.2; }
|
|
60% { opacity: 1; }
|
|
65% { opacity: 1; }
|
|
70% { opacity: 0.2; }
|
|
100% { opacity: 0.2; }
|
|
}
|
|
|
|
@keyframes spinner9 {
|
|
0% { opacity: 0.2; }
|
|
35% { opacity: 0.2; }
|
|
40% { opacity: 1; }
|
|
45% { opacity: 1; }
|
|
50% { opacity: 0.2; }
|
|
55% { opacity: 1; }
|
|
60% { opacity: 1; }
|
|
65% { opacity: 0.2; }
|
|
100% { opacity: 0.2; }
|
|
}
|
|
|
|
@keyframes spinner10 {
|
|
0% { opacity: 0.2; }
|
|
40% { opacity: 0.2; }
|
|
45% { opacity: 1; }
|
|
55% { opacity: 1; }
|
|
60% { opacity: 0.2; }
|
|
100% { opacity: 0.2; }
|
|
}
|
|
|
|
.spinner {
|
|
animation-duration: 2s;
|
|
animation-iteration-count: infinite;
|
|
animation-direction: alternate;
|
|
}
|
|
|
|
.spinner1 {
|
|
animation-name: spinner1;
|
|
}
|
|
|
|
.spinner2 {
|
|
animation-name: spinner2;
|
|
}
|
|
|
|
.spinner3 {
|
|
animation-name: spinner3;
|
|
}
|
|
|
|
.spinner4 {
|
|
animation-name: spinner4;
|
|
}
|
|
|
|
.spinner5 {
|
|
animation-name: spinner5;
|
|
}
|
|
|
|
.spinner6 {
|
|
animation-name: spinner6;
|
|
}
|
|
|
|
.spinner7 {
|
|
animation-name: spinner7;
|
|
}
|
|
|
|
.spinner8 {
|
|
animation-name: spinner8;
|
|
}
|
|
|
|
.spinner9 {
|
|
animation-name: spinner9;
|
|
}
|
|
|
|
.spinner10 {
|
|
animation-name: spinner10;
|
|
}
|
|
|
|
/* MOBILE SETTINGS */
|
|
@media only screen and (max-width: 600px) {
|
|
.spinner-bar {
|
|
width: 100%;
|
|
padding-right: 20px;
|
|
padding-left: 20px;
|
|
}
|
|
}
|