Difference between revisions of "Team:Nanjing-China/CSS:loader"
(Created page with ".spinner { margin: 100px auto; width: 20px; height: 20px; position: relative; } .container1 > div, .container2 > div, .container3 > div { width: 6px; height: 6px...") |
|||
| Line 5: | Line 5: | ||
position: relative; | position: relative; | ||
} | } | ||
| − | |||
.container1 > div, .container2 > div, .container3 > div { | .container1 > div, .container2 > div, .container3 > div { | ||
width: 6px; | width: 6px; | ||
height: 6px; | height: 6px; | ||
background-color: #333; | background-color: #333; | ||
| − | |||
border-radius: 100%; | border-radius: 100%; | ||
position: absolute; | position: absolute; | ||
| Line 18: | Line 16: | ||
animation-fill-mode: both; | animation-fill-mode: both; | ||
} | } | ||
| − | |||
.spinner .spinner-container { | .spinner .spinner-container { | ||
position: absolute; | position: absolute; | ||
| Line 24: | Line 21: | ||
height: 100%; | height: 100%; | ||
} | } | ||
| − | |||
.container2 { | .container2 { | ||
-webkit-transform: rotateZ(45deg); | -webkit-transform: rotateZ(45deg); | ||
transform: rotateZ(45deg); | transform: rotateZ(45deg); | ||
} | } | ||
| − | |||
.container3 { | .container3 { | ||
-webkit-transform: rotateZ(90deg); | -webkit-transform: rotateZ(90deg); | ||
transform: rotateZ(90deg); | transform: rotateZ(90deg); | ||
} | } | ||
| − | |||
.circle1 { top: 0; left: 0; } | .circle1 { top: 0; left: 0; } | ||
.circle2 { top: 0; right: 0; } | .circle2 { top: 0; right: 0; } | ||
.circle3 { right: 0; bottom: 0; } | .circle3 { right: 0; bottom: 0; } | ||
.circle4 { left: 0; bottom: 0; } | .circle4 { left: 0; bottom: 0; } | ||
| − | |||
.container2 .circle1 { | .container2 .circle1 { | ||
-webkit-animation-delay: -1.1s; | -webkit-animation-delay: -1.1s; | ||
animation-delay: -1.1s; | animation-delay: -1.1s; | ||
} | } | ||
| − | + | ||
.container3 .circle1 { | .container3 .circle1 { | ||
-webkit-animation-delay: -1.0s; | -webkit-animation-delay: -1.0s; | ||
animation-delay: -1.0s; | animation-delay: -1.0s; | ||
| − | } | + | } |
| − | + | ||
.container1 .circle2 { | .container1 .circle2 { | ||
-webkit-animation-delay: -0.9s; | -webkit-animation-delay: -0.9s; | ||
animation-delay: -0.9s; | animation-delay: -0.9s; | ||
| − | } | + | } |
| − | + | ||
.container2 .circle2 { | .container2 .circle2 { | ||
-webkit-animation-delay: -0.8s; | -webkit-animation-delay: -0.8s; | ||
animation-delay: -0.8s; | animation-delay: -0.8s; | ||
} | } | ||
| − | |||
.container3 .circle2 { | .container3 .circle2 { | ||
-webkit-animation-delay: -0.7s; | -webkit-animation-delay: -0.7s; | ||
animation-delay: -0.7s; | animation-delay: -0.7s; | ||
} | } | ||
| − | |||
.container1 .circle3 { | .container1 .circle3 { | ||
-webkit-animation-delay: -0.6s; | -webkit-animation-delay: -0.6s; | ||
animation-delay: -0.6s; | animation-delay: -0.6s; | ||
| − | } | + | } |
| − | + | ||
.container2 .circle3 { | .container2 .circle3 { | ||
-webkit-animation-delay: -0.5s; | -webkit-animation-delay: -0.5s; | ||
animation-delay: -0.5s; | animation-delay: -0.5s; | ||
} | } | ||
| − | |||
.container3 .circle3 { | .container3 .circle3 { | ||
-webkit-animation-delay: -0.4s; | -webkit-animation-delay: -0.4s; | ||
animation-delay: -0.4s; | animation-delay: -0.4s; | ||
} | } | ||
| − | |||
.container1 .circle4 { | .container1 .circle4 { | ||
-webkit-animation-delay: -0.3s; | -webkit-animation-delay: -0.3s; | ||
animation-delay: -0.3s; | animation-delay: -0.3s; | ||
} | } | ||
| − | |||
.container2 .circle4 { | .container2 .circle4 { | ||
-webkit-animation-delay: -0.2s; | -webkit-animation-delay: -0.2s; | ||
animation-delay: -0.2s; | animation-delay: -0.2s; | ||
} | } | ||
| − | |||
.container3 .circle4 { | .container3 .circle4 { | ||
-webkit-animation-delay: -0.1s; | -webkit-animation-delay: -0.1s; | ||
animation-delay: -0.1s; | animation-delay: -0.1s; | ||
} | } | ||
| − | |||
@-webkit-keyframes bouncedelay { | @-webkit-keyframes bouncedelay { | ||
0%, 80%, 100% { -webkit-transform: scale(0.0) } | 0%, 80%, 100% { -webkit-transform: scale(0.0) } | ||
40% { -webkit-transform: scale(1.0) } | 40% { -webkit-transform: scale(1.0) } | ||
| − | } | + | } |
| − | + | ||
@keyframes bouncedelay { | @keyframes bouncedelay { | ||
0%, 80%, 100% { | 0%, 80%, 100% { | ||
Revision as of 13:36, 22 August 2018
.spinner {
margin: 100px auto; width: 20px; height: 20px; position: relative;
} .container1 > div, .container2 > div, .container3 > div {
width: 6px; height: 6px; background-color: #333; border-radius: 100%; position: absolute; -webkit-animation: bouncedelay 1.2s infinite ease-in-out; animation: bouncedelay 1.2s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both;
} .spinner .spinner-container {
position: absolute; width: 100%; height: 100%;
} .container2 {
-webkit-transform: rotateZ(45deg); transform: rotateZ(45deg);
} .container3 {
-webkit-transform: rotateZ(90deg); transform: rotateZ(90deg);
} .circle1 { top: 0; left: 0; } .circle2 { top: 0; right: 0; } .circle3 { right: 0; bottom: 0; } .circle4 { left: 0; bottom: 0; } .container2 .circle1 {
-webkit-animation-delay: -1.1s; animation-delay: -1.1s;
}
.container3 .circle1 {
-webkit-animation-delay: -1.0s; animation-delay: -1.0s;
} .container1 .circle2 {
-webkit-animation-delay: -0.9s; animation-delay: -0.9s;
} .container2 .circle2 {
-webkit-animation-delay: -0.8s; animation-delay: -0.8s;
} .container3 .circle2 {
-webkit-animation-delay: -0.7s; animation-delay: -0.7s;
} .container1 .circle3 {
-webkit-animation-delay: -0.6s; animation-delay: -0.6s;
} .container2 .circle3 {
-webkit-animation-delay: -0.5s; animation-delay: -0.5s;
} .container3 .circle3 {
-webkit-animation-delay: -0.4s; animation-delay: -0.4s;
} .container1 .circle4 {
-webkit-animation-delay: -0.3s; animation-delay: -0.3s;
} .container2 .circle4 {
-webkit-animation-delay: -0.2s; animation-delay: -0.2s;
} .container3 .circle4 {
-webkit-animation-delay: -0.1s; animation-delay: -0.1s;
} @-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
} @keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}