loading.css 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. /*body {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. #busyIcon {
  6. z-index:99999;
  7. position:absolute;
  8. top:0;left:0;
  9. width:100%;
  10. height:100%;
  11. background-color: rgba(0,0,0,0.2);
  12. }
  13. .container {
  14. width:100px;
  15. height: 100px;
  16. opacity: 0.8;
  17. margin-top: -50px;
  18. margin-left: -50px;
  19. position: absolute;
  20. top:50%;left:50%;
  21. -webkit-border-radius: 10%;
  22. }
  23. .top,.base {
  24. height: 30%;
  25. }*/
  26. .spinner {
  27. height: 40%;
  28. width: 40%;
  29. position: relative;
  30. margin: 0 auto;
  31. }
  32. .spinner div {
  33. width: 12%;
  34. height: 26%;
  35. background-color: white;
  36. position: absolute;
  37. left: 44.5%;
  38. top: 37%;
  39. opacity: 0;
  40. -webkit-border-radius: 30%;
  41. -webkit-animation: fade 1s linear infinite;
  42. }
  43. .spinner div.bar1 {-webkit-transform:rotate(0deg) translate(0, -142%); -webkit-animation-delay: 0s;}
  44. .spinner div.bar2 {-webkit-transform:rotate(30deg) translate(0, -142%); -webkit-animation-delay: -0.9167s;}
  45. .spinner div.bar3 {-webkit-transform:rotate(60deg) translate(0, -142%); -webkit-animation-delay: -0.833s;}
  46. .spinner div.bar4 {-webkit-transform:rotate(90deg) translate(0, -142%); -webkit-animation-delay: -0.75s;}
  47. .spinner div.bar5 {-webkit-transform:rotate(120deg) translate(0, -142%); -webkit-animation-delay: -0.667s;}
  48. .spinner div.bar6 {-webkit-transform:rotate(150deg) translate(0, -142%); -webkit-animation-delay: -0.5833s;}
  49. .spinner div.bar7 {-webkit-transform:rotate(180deg) translate(0, -142%); -webkit-animation-delay: -0.5s;}
  50. .spinner div.bar8 {-webkit-transform:rotate(210deg) translate(0, -142%); -webkit-animation-delay: -0.41667s;}
  51. .spinner div.bar9 {-webkit-transform:rotate(240deg) translate(0, -142%); -webkit-animation-delay: -0.333s;}
  52. .spinner div.bar10 {-webkit-transform:rotate(270deg) translate(0, -142%); -webkit-animation-delay: -0.25s;}
  53. .spinner div.bar11 {-webkit-transform:rotate(300deg) translate(0, -142%); -webkit-animation-delay: -0.1667s;}
  54. .spinner div.bar12 {-webkit-transform:rotate(330deg) translate(0, -142%); -webkit-animation-delay: -0.0833s;}
  55. @-webkit-keyframes fade{
  56. from {opacity: 1;}
  57. to {opacity: 0.25;}
  58. }