mirror of
https://github.com/gryf/coach.git
synced 2026-02-02 14:15:45 +01:00
coach v0.8.0
This commit is contained in:
Gal Leibovich
219
spinner.css
Normal file
219
spinner.css
Normal file
@@ -0,0 +1,219 @@
|
||||
/* based on https://codepen.io/widmr/pen/tklqx by Anreas Widmer */
|
||||
|
||||
.spinner {
|
||||
font-size: 80px;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 15%;
|
||||
z-index: 9999;
|
||||
margin: 100px auto;
|
||||
border-radius: 50%;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.spinner li {
|
||||
position: absolute;
|
||||
width: .2em;
|
||||
height: .2em;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.spinner li:nth-child(1) {
|
||||
left: 50%;
|
||||
top: 0;
|
||||
margin: 0 0 0 -.1em;
|
||||
background: #00C176;
|
||||
-webkit-transform-origin: 50% 250%;
|
||||
-moz-transform-origin: 50% 250%;
|
||||
-ms-transform-origin: 50% 250%;
|
||||
-o-transform-origin: 50% 250%;
|
||||
transform-origin: 50% 250%;
|
||||
-webkit-animation:
|
||||
rota 1.13s linear infinite,
|
||||
opa 3.67s ease-in-out infinite alternate;
|
||||
-moz-animation:
|
||||
rota 1.13s linear infinite,
|
||||
opa 3.67s ease-in-out infinite alternate;
|
||||
-ms-animation:
|
||||
rota 1.13s linear infinite,
|
||||
opa 3.67s ease-in-out infinite alternate;
|
||||
-o-animation:
|
||||
rota 1.13s linear infinite,
|
||||
opa 3.67s ease-in-out infinite alternate;
|
||||
animation:
|
||||
rota 1.13s linear infinite,
|
||||
opa 3.67s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.spinner li:nth-child(2) {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
margin: -.1em 0 0 0;
|
||||
background: #FF003C;
|
||||
-webkit-transform-origin: -150% 50%;
|
||||
-moz-transform-origin: -150% 50%;
|
||||
-ms-transform-origin: -150% 50%;
|
||||
-o-transform-origin: -150% 50%;
|
||||
transform-origin: -150% 50%;
|
||||
-webkit-animation:
|
||||
rota 1.86s linear infinite,
|
||||
opa 4.29s ease-in-out infinite alternate;
|
||||
-moz-animation:
|
||||
rota 1.86s linear infinite,
|
||||
opa 4.29s ease-in-out infinite alternate;
|
||||
-ms-animation:
|
||||
rota 1.86s linear infinite,
|
||||
opa 4.29s ease-in-out infinite alternate;
|
||||
-o-animation:
|
||||
rota 1.86s linear infinite,
|
||||
opa 4.29s ease-in-out infinite alternate;
|
||||
animation:
|
||||
rota 1.86s linear infinite,
|
||||
opa 4.29s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.spinner li:nth-child(3) {
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
margin: 0 0 0 -.1em;
|
||||
background: #FABE28;
|
||||
-webkit-transform-origin: 50% -150%;
|
||||
-moz-transform-origin: 50% -150%;
|
||||
-ms-transform-origin: 50% -150%;
|
||||
-o-transform-origin: 50% -150%;
|
||||
transform-origin: 50% -150%;
|
||||
-webkit-animation:
|
||||
rota 1.45s linear infinite,
|
||||
opa 5.12s ease-in-out infinite alternate;
|
||||
-moz-animation:
|
||||
rota 1.45s linear infinite,
|
||||
opa 5.12s ease-in-out infinite alternate;
|
||||
-ms-animation:
|
||||
rota 1.45s linear infinite,
|
||||
opa 5.12s ease-in-out infinite alternate;
|
||||
-o-animation:
|
||||
rota 1.45s linear infinite,
|
||||
opa 5.12s ease-in-out infinite alternate;
|
||||
animation:
|
||||
rota 1.45s linear infinite,
|
||||
opa 5.12s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.spinner li:nth-child(4) {
|
||||
top: 50%;
|
||||
left 0;
|
||||
margin: -.1em 0 0 0;
|
||||
background: #88C100;
|
||||
-webkit-transform-origin: 250% 50%;
|
||||
-moz-transform-origin: 250% 50%;
|
||||
-ms-transform-origin: 250% 50%;
|
||||
-o-transform-origin: 250% 50%;
|
||||
transform-origin: 250% 50%;
|
||||
-webkit-animation:
|
||||
rota 1.72s linear infinite,
|
||||
opa 5.25s ease-in-out infinite alternate;
|
||||
-moz-animation:
|
||||
rota 1.72s linear infinite,
|
||||
opa 5.25s ease-in-out infinite alternate;
|
||||
-ms-animation:
|
||||
rota 1.72s linear infinite,
|
||||
opa 5.25s ease-in-out infinite alternate;
|
||||
-o-animation:
|
||||
rota 1.72s linear infinite,
|
||||
opa 5.25s ease-in-out infinite alternate;
|
||||
animation:
|
||||
rota 1.72s linear infinite,
|
||||
opa 5.25s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes rota {
|
||||
to { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@-moz-keyframes rota {
|
||||
to { -moz-transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@-ms-keyframes rota {
|
||||
to { -ms-transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@-o-keyframes rota {
|
||||
to { -o-transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes rota {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes opa {
|
||||
12.0% { opacity: 0.80; }
|
||||
19.5% { opacity: 0.88; }
|
||||
37.2% { opacity: 0.64; }
|
||||
40.5% { opacity: 0.52; }
|
||||
52.7% { opacity: 0.69; }
|
||||
60.2% { opacity: 0.60; }
|
||||
66.6% { opacity: 0.52; }
|
||||
70.0% { opacity: 0.63; }
|
||||
79.9% { opacity: 0.60; }
|
||||
84.2% { opacity: 0.75; }
|
||||
91.0% { opacity: 0.87; }
|
||||
}
|
||||
|
||||
@-moz-keyframes opa {
|
||||
12.0% { opacity: 0.80; }
|
||||
19.5% { opacity: 0.88; }
|
||||
37.2% { opacity: 0.64; }
|
||||
40.5% { opacity: 0.52; }
|
||||
52.7% { opacity: 0.69; }
|
||||
60.2% { opacity: 0.60; }
|
||||
66.6% { opacity: 0.52; }
|
||||
70.0% { opacity: 0.63; }
|
||||
79.9% { opacity: 0.60; }
|
||||
84.2% { opacity: 0.75; }
|
||||
91.0% { opacity: 0.87; }
|
||||
}
|
||||
|
||||
@-ms-keyframes opa {
|
||||
12.0% { opacity: 0.80; }
|
||||
19.5% { opacity: 0.88; }
|
||||
37.2% { opacity: 0.64; }
|
||||
40.5% { opacity: 0.52; }
|
||||
52.7% { opacity: 0.69; }
|
||||
60.2% { opacity: 0.60; }
|
||||
66.6% { opacity: 0.52; }
|
||||
70.0% { opacity: 0.63; }
|
||||
79.9% { opacity: 0.60; }
|
||||
84.2% { opacity: 0.75; }
|
||||
91.0% { opacity: 0.87; }
|
||||
}
|
||||
|
||||
@-o-keyframes opa {
|
||||
12.0% { opacity: 0.80; }
|
||||
19.5% { opacity: 0.88; }
|
||||
37.2% { opacity: 0.64; }
|
||||
40.5% { opacity: 0.52; }
|
||||
52.7% { opacity: 0.69; }
|
||||
60.2% { opacity: 0.60; }
|
||||
66.6% { opacity: 0.52; }
|
||||
70.0% { opacity: 0.63; }
|
||||
79.9% { opacity: 0.60; }
|
||||
84.2% { opacity: 0.75; }
|
||||
91.0% { opacity: 0.87; }
|
||||
}
|
||||
|
||||
@keyframes opa {
|
||||
12.0% { opacity: 0.80; }
|
||||
19.5% { opacity: 0.88; }
|
||||
37.2% { opacity: 0.64; }
|
||||
40.5% { opacity: 0.52; }
|
||||
52.7% { opacity: 0.69; }
|
||||
60.2% { opacity: 0.60; }
|
||||
66.6% { opacity: 0.52; }
|
||||
70.0% { opacity: 0.63; }
|
||||
79.9% { opacity: 0.60; }
|
||||
84.2% { opacity: 0.75; }
|
||||
91.0% { opacity: 0.87; }
|
||||
}
|
||||
Reference in New Issue
Block a user