spinner.css 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. .spinner,
  2. .spinner:after {
  3. border-radius: 50%;
  4. width: 3em;
  5. height: 3em;
  6. position: relative;
  7. flex-shrink: 0;
  8. }
  9. .spinner {
  10. margin: 60px auto;
  11. font-size: 10px;
  12. position: relative;
  13. text-indent: -9999em;
  14. border-top: .5em solid var(--accent);
  15. border-right: .5em solid var(--accent);
  16. border-bottom: .5em solid var(--accent);
  17. border-left: .5em solid var(--button-background);
  18. -webkit-transform: translateZ(0);
  19. -ms-transform: translateZ(0);
  20. transform: translateZ(0);
  21. -webkit-animation: load8 1.1s infinite linear;
  22. animation: load8 1.1s infinite linear;
  23. }
  24. @-webkit-keyframes load8 {
  25. 0% {
  26. -webkit-transform: rotate(0deg);
  27. transform: rotate(0deg);
  28. }
  29. 100% {
  30. -webkit-transform: rotate(360deg);
  31. transform: rotate(360deg);
  32. }
  33. }
  34. @keyframes load8 {
  35. 0% {
  36. -webkit-transform: rotate(0deg);
  37. transform: rotate(0deg);
  38. }
  39. 100% {
  40. -webkit-transform: rotate(360deg);
  41. transform: rotate(360deg);
  42. }
  43. }
  44. header .spinner {
  45. margin-left: 1em;
  46. }
  47. header .spinner.hidden + .loading-message {
  48. display: none;
  49. }
  50. header .spinner + .loading-message {
  51. display: inline;
  52. flex-shrink: 0;
  53. }