loading.css 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. #loadCenter,.loadCenter {
  2. position: absolute;
  3. top: 50%;
  4. left: 50%;
  5. margin-top: -180px;
  6. margin-left: -75px;
  7. width: 150px;
  8. height: 80px;
  9. font-family: "Lato", sans-serif;
  10. font-weight: 600;
  11. font-size: 16px;
  12. color: #fff;
  13. text-align: center;
  14. -webkit-font-smoothing: antialiased;
  15. }
  16. .skype-loader {
  17. width: 80px;
  18. height: 80px;
  19. position: relative;
  20. margin: auto;
  21. margin-top: 60px;
  22. margin-bottom: 70px;
  23. }
  24. .skype-loader .dot {
  25. position: absolute;
  26. top: 0;
  27. left: 0;
  28. width: 80px;
  29. height: 80px;
  30. animation: 1.7s dotrotate cubic-bezier(0.775, 0.005, 0.310, 1.000) infinite;
  31. }
  32. .skype-loader .dot:nth-child(1) {
  33. animation-delay: 0.2s;
  34. }
  35. .skype-loader .dot:nth-child(2) {
  36. animation-delay: 0.35s;
  37. }
  38. .skype-loader .dot:nth-child(3) {
  39. animation-delay: 0.45s;
  40. }
  41. .skype-loader .dot:nth-child(4) {
  42. animation-delay: 0.55s;
  43. }
  44. .skype-loader .dot:after, .skype-loader .dot .first {
  45. content: "";
  46. position: absolute;
  47. width: 8px;
  48. height: 8px;
  49. background: white;
  50. border-radius: 50%;
  51. left: 50%;
  52. margin-left: -4px;
  53. }
  54. .skype-loader .dot .first {
  55. background: #fff;
  56. margin-top: -4px;
  57. animation: 1.7s dotscale cubic-bezier(0.775, 0.005, 0.310, 1.000) infinite;
  58. animation-delay: 0.2s;
  59. }
  60. @keyframes dotrotate {
  61. from { transform: rotate(0deg); }
  62. to { transform: rotate(360deg); }
  63. }
  64. @keyframes dotscale {
  65. 0%, 10% { width: 16px; height: 16px; margin-left: -8px; margin-top: -4px; }
  66. 50% { width: 8px; height: 8px; margin-left: -4px; margin-top: 0; }
  67. 90%, 100% { width: 16px; height: 16px; margin-left: -8px; margin-top: -4px; }
  68. }
  69. #loadingParent,.loadingParent{
  70. display: none;
  71. position: absolute;
  72. left: 0;
  73. right: 0;
  74. top: 0;
  75. bottom: 0;
  76. background: #000;
  77. z-index: 999999 !important;
  78. filter:alpha(opacity=50);
  79. -moz-opacity:0.5;
  80. -khtml-opacity: 0.5;
  81. opacity: 0.5;
  82. }