| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121 |
- .loading_container{
- margin:0;
- padding:0;
- position: absolute;
- left:0;
- top:0;
- width:100%;
- display: none;
- opacity: 0.5;
- background-color: black;
- }
- .spinner {
- margin: 245px auto;
- width: 60px;
- height: 60px;
- position: relative;
- }
- .container1 > div, .container2 > div, .container3 > div {
- width: 16px;
- height: 16px;
- background-color: #67CF22;
- 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);
- }
- }
|