286 lines
8.0 KiB
CSS
286 lines
8.0 KiB
CSS
/**
|
|
* Spinners
|
|
*
|
|
* @see http://tobiasahlin.com/spinkit/
|
|
*/
|
|
.spinner-cube-grid {
|
|
width: 40px;
|
|
height: 40px; }
|
|
.spinner-cube-grid .sk-cube {
|
|
width: 33%;
|
|
height: 33%;
|
|
background-color: #333;
|
|
float: left;
|
|
-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
|
|
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; }
|
|
.spinner-cube-grid .sk-cube1 {
|
|
-webkit-animation-delay: 0.2s;
|
|
animation-delay: 0.2s; }
|
|
.spinner-cube-grid .sk-cube2 {
|
|
-webkit-animation-delay: 0.3s;
|
|
animation-delay: 0.3s; }
|
|
.spinner-cube-grid .sk-cube3 {
|
|
-webkit-animation-delay: 0.4s;
|
|
animation-delay: 0.4s; }
|
|
.spinner-cube-grid .sk-cube4 {
|
|
-webkit-animation-delay: 0.1s;
|
|
animation-delay: 0.1s; }
|
|
.spinner-cube-grid .sk-cube5 {
|
|
-webkit-animation-delay: 0.2s;
|
|
animation-delay: 0.2s; }
|
|
.spinner-cube-grid .sk-cube6 {
|
|
-webkit-animation-delay: 0.3s;
|
|
animation-delay: 0.3s; }
|
|
.spinner-cube-grid .sk-cube7 {
|
|
-webkit-animation-delay: 0s;
|
|
animation-delay: 0s; }
|
|
.spinner-cube-grid .sk-cube8 {
|
|
-webkit-animation-delay: 0.1s;
|
|
animation-delay: 0.1s; }
|
|
.spinner-cube-grid .sk-cube9 {
|
|
-webkit-animation-delay: 0.2s;
|
|
animation-delay: 0.2s; }
|
|
@-webkit-keyframes sk-cubeGridScaleDelay {
|
|
0%, 70%, 100% {
|
|
-webkit-transform: scale3D(1, 1, 1);
|
|
transform: scale3D(1, 1, 1); }
|
|
35% {
|
|
-webkit-transform: scale3D(0, 0, 1);
|
|
transform: scale3D(0, 0, 1); } }
|
|
@keyframes sk-cubeGridScaleDelay {
|
|
0%, 70%, 100% {
|
|
-webkit-transform: scale3D(1, 1, 1);
|
|
transform: scale3D(1, 1, 1); }
|
|
35% {
|
|
-webkit-transform: scale3D(0, 0, 1);
|
|
transform: scale3D(0, 0, 1); } }
|
|
.spinner-circle-line {
|
|
margin: 10px auto 0;
|
|
width: 70px;
|
|
text-align: center; }
|
|
.spinner-circle-line > div {
|
|
width: 18px;
|
|
height: 18px;
|
|
background-color: #333;
|
|
border-radius: 100%;
|
|
display: inline-block;
|
|
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
|
animation: sk-bouncedelay 1.4s infinite ease-in-out both; }
|
|
.spinner-circle-line .bounce1 {
|
|
-webkit-animation-delay: -0.32s;
|
|
animation-delay: -0.32s; }
|
|
.spinner-circle-line .bounce2 {
|
|
-webkit-animation-delay: -0.16s;
|
|
animation-delay: -0.16s; }
|
|
@-webkit-keyframes sk-bouncedelay {
|
|
0%, 80%, 100% {
|
|
-webkit-transform: scale(0); }
|
|
40% {
|
|
-webkit-transform: scale(1); } }
|
|
@keyframes sk-bouncedelay {
|
|
0%, 80%, 100% {
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0); }
|
|
40% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1); } }
|
|
.spinner-circles {
|
|
width: 40px;
|
|
height: 40px;
|
|
position: relative;
|
|
text-align: center;
|
|
-webkit-animation: sk-rotate 2.0s infinite linear;
|
|
animation: sk-rotate 2.0s infinite linear; }
|
|
.dot1, .dot2 {
|
|
width: 60%;
|
|
height: 60%;
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 0;
|
|
background-color: #333;
|
|
border-radius: 100%;
|
|
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
|
|
animation: sk-bounce 2.0s infinite ease-in-out; }
|
|
.dot2 {
|
|
top: auto;
|
|
bottom: 0;
|
|
-webkit-animation-delay: -1.0s;
|
|
animation-delay: -1.0s; }
|
|
@-webkit-keyframes sk-rotate {
|
|
100% {
|
|
-webkit-transform: rotate(360deg); } }
|
|
@keyframes sk-rotate {
|
|
100% {
|
|
transform: rotate(360deg);
|
|
-webkit-transform: rotate(360deg); } }
|
|
@-webkit-keyframes sk-bounce {
|
|
0%, 100% {
|
|
-webkit-transform: scale(0); }
|
|
50% {
|
|
-webkit-transform: scale(1); } }
|
|
@keyframes sk-bounce {
|
|
0%, 100% {
|
|
transform: scale(0);
|
|
-webkit-transform: scale(0); }
|
|
50% {
|
|
transform: scale(1);
|
|
-webkit-transform: scale(1); } }
|
|
/* Cube */
|
|
.spinner-cube {
|
|
width: 40px;
|
|
height: 40px;
|
|
background-color: #333;
|
|
margin: 100px auto;
|
|
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
|
|
animation: sk-rotateplane 1.2s infinite ease-in-out; }
|
|
@-webkit-keyframes sk-rotateplane {
|
|
0% {
|
|
-webkit-transform: perspective(120px); }
|
|
50% {
|
|
-webkit-transform: perspective(120px) rotateY(180deg); }
|
|
100% {
|
|
-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); } }
|
|
@keyframes sk-rotateplane {
|
|
0% {
|
|
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
|
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
|
|
50% {
|
|
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
|
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
|
|
100% {
|
|
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
|
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }
|
|
.spinner-cubes {
|
|
width: 40px;
|
|
height: 40px;
|
|
position: relative; }
|
|
.cube1, .cube2 {
|
|
background-color: #333;
|
|
width: 15px;
|
|
height: 15px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
-webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
|
|
animation: sk-cubemove 1.8s infinite ease-in-out; }
|
|
.cube2 {
|
|
-webkit-animation-delay: -0.9s;
|
|
animation-delay: -0.9s; }
|
|
@-webkit-keyframes sk-cubemove {
|
|
25% {
|
|
-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); }
|
|
50% {
|
|
-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); }
|
|
75% {
|
|
-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); }
|
|
100% {
|
|
-webkit-transform: rotate(-360deg); } }
|
|
@keyframes sk-cubemove {
|
|
25% {
|
|
transform: translateX(42px) rotate(-90deg) scale(0.5);
|
|
-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); }
|
|
50% {
|
|
transform: translateX(42px) translateY(42px) rotate(-179deg);
|
|
-webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); }
|
|
50.1% {
|
|
transform: translateX(42px) translateY(42px) rotate(-180deg);
|
|
-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); }
|
|
75% {
|
|
transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
|
|
-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); }
|
|
100% {
|
|
transform: rotate(-360deg);
|
|
-webkit-transform: rotate(-360deg); } }
|
|
.spinner-pump {
|
|
width: 40px;
|
|
height: 40px;
|
|
position: relative; }
|
|
.double-bounce1, .double-bounce2 {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
background-color: #333;
|
|
opacity: 0.6;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
|
|
animation: sk-bounce 2.0s infinite ease-in-out; }
|
|
.double-bounce2 {
|
|
-webkit-animation-delay: -1.0s;
|
|
animation-delay: -1.0s; }
|
|
@-webkit-keyframes sk-bounce {
|
|
0%, 100% {
|
|
-webkit-transform: scale(0); }
|
|
50% {
|
|
-webkit-transform: scale(1); } }
|
|
@keyframes sk-bounce {
|
|
0%, 100% {
|
|
transform: scale(0);
|
|
-webkit-transform: scale(0); }
|
|
50% {
|
|
transform: scale(1);
|
|
-webkit-transform: scale(1); } }
|
|
/* Pulsar */
|
|
.spinner-pulsar {
|
|
width: 40px;
|
|
height: 40px;
|
|
background-color: #333;
|
|
border-radius: 100%;
|
|
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
|
|
animation: sk-scaleout 1.0s infinite ease-in-out; }
|
|
@-webkit-keyframes sk-scaleout {
|
|
0% {
|
|
-webkit-transform: scale(0); }
|
|
100% {
|
|
-webkit-transform: scale(1);
|
|
opacity: 0; } }
|
|
@keyframes sk-scaleout {
|
|
0% {
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0); }
|
|
100% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
opacity: 0; } }
|
|
/* Accordion */
|
|
.spinner-accordion {
|
|
margin: 100px auto;
|
|
width: 50px;
|
|
height: 40px;
|
|
text-align: center;
|
|
font-size: 10px; }
|
|
.spinner-accordion > div {
|
|
background-color: #333;
|
|
height: 100%;
|
|
width: 6px;
|
|
display: inline-block;
|
|
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
|
|
animation: sk-stretchdelay 1.2s infinite ease-in-out; }
|
|
.spinner-accordion.rect2 {
|
|
-webkit-animation-delay: -1.1s;
|
|
animation-delay: -1.1s; }
|
|
.spinner-accordion .rect3 {
|
|
-webkit-animation-delay: -1.0s;
|
|
animation-delay: -1.0s; }
|
|
.spinner-accordion .rect4 {
|
|
-webkit-animation-delay: -0.9s;
|
|
animation-delay: -0.9s; }
|
|
.spinner-accordion.rect5 {
|
|
-webkit-animation-delay: -0.8s;
|
|
animation-delay: -0.8s; }
|
|
@-webkit-keyframes sk-stretchdelay {
|
|
0%, 40%, 100% {
|
|
-webkit-transform: scaleY(0.4); }
|
|
20% {
|
|
-webkit-transform: scaleY(1); } }
|
|
@keyframes sk-stretchdelay {
|
|
0%, 40%, 100% {
|
|
transform: scaleY(0.4);
|
|
-webkit-transform: scaleY(0.4); }
|
|
20% {
|
|
transform: scaleY(1);
|
|
-webkit-transform: scaleY(1); } }
|
|
.no-scroll {
|
|
overflow: hidden; }
|