spinner.css 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. /* ---- BEGIN loading spinner ---- */
  2. #loading .spinner {
  3. margin: 100px auto;
  4. width: 50px;
  5. height: 40px;
  6. text-align: center;
  7. font-size: 10px;
  8. }
  9. #loading .spinner > div {
  10. background-color: #333;
  11. height: 100%;
  12. width: 6px;
  13. display: inline-block;
  14. -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  15. animation: sk-stretchdelay 1.2s infinite ease-in-out;
  16. }
  17. #loading .spinner .rect2 {
  18. -webkit-animation-delay: -1.1s;
  19. animation-delay: -1.1s;
  20. }
  21. #loading .spinner .rect3 {
  22. -webkit-animation-delay: -1s;
  23. animation-delay: -1s;
  24. }
  25. #loading .spinner .rect4 {
  26. -webkit-animation-delay: -0.9s;
  27. animation-delay: -0.9s;
  28. }
  29. #loading .spinner .rect5 {
  30. -webkit-animation-delay: -0.8s;
  31. animation-delay: -0.8s;
  32. }
  33. @-webkit-keyframes sk-stretchdelay {
  34. 0%,
  35. 40%,
  36. 100% {
  37. -webkit-transform: scaleY(0.4);
  38. }
  39. 20% {
  40. -webkit-transform: scaleY(1);
  41. }
  42. }
  43. @keyframes sk-stretchdelay {
  44. 0%,
  45. 40%,
  46. 100% {
  47. transform: scaleY(0.4);
  48. -webkit-transform: scaleY(0.4);
  49. }
  50. 20% {
  51. transform: scaleY(1);
  52. -webkit-transform: scaleY(1);
  53. }
  54. }
  55. /* ---- END loading spinner ---- */