loading.css 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. .cssload-loader
  2. {
  3. position: absolute;
  4. left: calc(50% - 40px);
  5. top: calc(50% - 40px);
  6. width: 80px;
  7. height: 80px;
  8. border-radius: 50%;
  9. perspective: 1000px;
  10. }
  11. .cssload-inner
  12. {
  13. position: absolute;
  14. width: 100%;
  15. height: 100%;
  16. box-sizing: border-box;
  17. border-radius: 50%;
  18. }
  19. .cssload-inner.cssload-one
  20. {
  21. left: 0%;
  22. top: 0%;
  23. animation: cssload-rotate-one 1.3s linear infinite;
  24. border-bottom: 4px solid rgb(0,0,0);
  25. }
  26. .cssload-inner.cssload-two
  27. {
  28. right: 0%;
  29. top: 0%;
  30. animation: cssload-rotate-two 1.3s linear infinite;
  31. border-right: 4px solid rgb(0,0,0);
  32. }
  33. .cssload-inner.cssload-three
  34. {
  35. right: 0%;
  36. bottom: 0%;
  37. animation: cssload-rotate-three 1.3s linear infinite;
  38. border-top: 4px solid rgb(0,0,0);
  39. }
  40. @keyframes cssload-rotate-one
  41. {
  42. 0%
  43. {
  44. transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  45. }
  46. 100%
  47. {
  48. transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  49. }
  50. }
  51. @keyframes cssload-rotate-two
  52. {
  53. 0%
  54. {
  55. transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  56. }
  57. 100%
  58. {
  59. transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  60. }
  61. }
  62. @keyframes cssload-rotate-three
  63. {
  64. 0%
  65. {
  66. transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  67. }
  68. 100%
  69. {
  70. transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  71. }
  72. }