loading-screen.css 720 B

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. .loading {
  2. position: fixed;
  3. top: 0px;
  4. left: 0px;
  5. width: 100%;
  6. height: 100%;
  7. z-index: 100;
  8. display: flex;
  9. align-items: center;
  10. justify-content: center;
  11. background-color: white;
  12. color: black;
  13. }
  14. @keyframes loading-rotate {
  15. 0% {
  16. transform: rotate(0deg);
  17. }
  18. 25% {
  19. transform: rotate(90deg);
  20. }
  21. 50% {
  22. transform: rotate(180deg);
  23. }
  24. 75% {
  25. transform: rotate(270deg);
  26. }
  27. 100% {
  28. transform: rotate(360deg);
  29. }
  30. }
  31. .loading .animation span {
  32. font-size: 1000%;
  33. animation-name: loading-rotate;
  34. animation-duration: 4s;
  35. animation-iteration-count: infinite;
  36. animation-timing-function: backward;
  37. }