load.css 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. #loading{
  2. background-color: #17607d;
  3. height: 100%;
  4. width: 100%;
  5. position: fixed;
  6. z-index: 1;
  7. margin-top: 0px;
  8. top: 0px;
  9. filter:alpha(opacity=50);
  10. -moz-opacity:0.4;
  11. -khtml-opacity: 0.4;
  12. opacity: 0.4;
  13. display: none;
  14. }
  15. #loading-center{
  16. width: 100%;
  17. height: 100%;
  18. position: relative;
  19. }
  20. #loading-center-absolute {
  21. position: absolute;
  22. left: 50%;
  23. top: 50%;
  24. height: 200px;
  25. width: 200px;
  26. margin-top: -100px;
  27. margin-left: -100px;
  28. -ms-transform: rotate(-135deg);
  29. -webkit-transform: rotate(-135deg);
  30. transform: rotate(-135deg);
  31. }
  32. .object{
  33. -moz-border-radius: 50% 50% 50% 50%;
  34. -webkit-border-radius: 50% 50% 50% 50%;
  35. border-radius: 50% 50% 50% 50%;
  36. position: absolute;
  37. border-top: 5px solid #FFF;
  38. border-bottom: 5px solid transparent;
  39. border-left: 5px solid #FFF;
  40. border-right: 5px solid transparent;
  41. -webkit-animation: animate 2s infinite;
  42. animation: animate 2s infinite;
  43. }
  44. #object_one{
  45. left: 75px;
  46. top: 75px;
  47. width: 50px;
  48. height: 50px;
  49. }
  50. #object_two{
  51. left: 65px;
  52. top: 65px;
  53. width: 70px;
  54. height: 70px;
  55. -webkit-animation-delay: 0.2s;
  56. animation-delay: 0.2s;
  57. }
  58. #object_three{
  59. left: 55px;
  60. top: 55px;
  61. width: 90px;
  62. height: 90px;
  63. -webkit-animation-delay: 0.4s;
  64. animation-delay: 0.4s;
  65. }
  66. #object_four{
  67. left: 45px;
  68. top: 45px;
  69. width: 110px;
  70. height: 110px;
  71. -webkit-animation-delay: 0.6s;
  72. animation-delay: 0.6s;
  73. }
  74. @-webkit-keyframes animate {
  75. 50% {
  76. -ms-transform: rotate(360deg) scale(0.8);
  77. -webkit-transform: rotate(360deg) scale(0.8);
  78. transform: rotate(360deg) scale(0.8);
  79. }
  80. }
  81. @keyframes animate {
  82. 50% {
  83. -ms-transform: rotate(360deg) scale(0.8);
  84. -webkit-transform: rotate(360deg) scale(0.8);
  85. transform: rotate(360deg) scale(0.8);
  86. }
  87. }