loading.css 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. .loading_container{
  2. margin:0;
  3. padding:0;
  4. position: absolute;
  5. left:0;
  6. top:0;
  7. width:100%;
  8. display: none;
  9. opacity: 0.5;
  10. background-color: black;
  11. }
  12. .spinner {
  13. margin: 245px auto;
  14. width: 60px;
  15. height: 60px;
  16. position: relative;
  17. }
  18. .container1 > div, .container2 > div, .container3 > div {
  19. width: 16px;
  20. height: 16px;
  21. background-color: #67CF22;
  22. border-radius: 100%;
  23. position: absolute;
  24. -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  25. animation: bouncedelay 1.2s infinite ease-in-out;
  26. -webkit-animation-fill-mode: both;
  27. animation-fill-mode: both;
  28. }
  29. .spinner .spinner-container {
  30. position: absolute;
  31. width: 100%;
  32. height: 100%;
  33. }
  34. .container2 {
  35. -webkit-transform: rotateZ(45deg);
  36. transform: rotateZ(45deg);
  37. }
  38. .container3 {
  39. -webkit-transform: rotateZ(90deg);
  40. transform: rotateZ(90deg);
  41. }
  42. .circle1 { top: 0; left: 0; }
  43. .circle2 { top: 0; right: 0; }
  44. .circle3 { right: 0; bottom: 0; }
  45. .circle4 { left: 0; bottom: 0; }
  46. .container2 .circle1 {
  47. -webkit-animation-delay: -1.1s;
  48. animation-delay: -1.1s;
  49. }
  50. .container3 .circle1 {
  51. -webkit-animation-delay: -1.0s;
  52. animation-delay: -1.0s;
  53. }
  54. .container1 .circle2 {
  55. -webkit-animation-delay: -0.9s;
  56. animation-delay: -0.9s;
  57. }
  58. .container2 .circle2 {
  59. -webkit-animation-delay: -0.8s;
  60. animation-delay: -0.8s;
  61. }
  62. .container3 .circle2 {
  63. -webkit-animation-delay: -0.7s;
  64. animation-delay: -0.7s;
  65. }
  66. .container1 .circle3 {
  67. -webkit-animation-delay: -0.6s;
  68. animation-delay: -0.6s;
  69. }
  70. .container2 .circle3 {
  71. -webkit-animation-delay: -0.5s;
  72. animation-delay: -0.5s;
  73. }
  74. .container3 .circle3 {
  75. -webkit-animation-delay: -0.4s;
  76. animation-delay: -0.4s;
  77. }
  78. .container1 .circle4 {
  79. -webkit-animation-delay: -0.3s;
  80. animation-delay: -0.3s;
  81. }
  82. .container2 .circle4 {
  83. -webkit-animation-delay: -0.2s;
  84. animation-delay: -0.2s;
  85. }
  86. .container3 .circle4 {
  87. -webkit-animation-delay: -0.1s;
  88. animation-delay: -0.1s;
  89. }
  90. @-webkit-keyframes bouncedelay {
  91. 0%, 80%, 100% { -webkit-transform: scale(0.0) }
  92. 40% { -webkit-transform: scale(1.0) }
  93. }
  94. @keyframes bouncedelay {
  95. 0%, 80%, 100% {
  96. transform: scale(0.0);
  97. -webkit-transform: scale(0.0);
  98. } 40% {
  99. transform: scale(1.0);
  100. -webkit-transform: scale(1.0);
  101. }
  102. }