loader.css 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. .loader-container {
  2. position: fixed;
  3. top: 50%;
  4. left: 50%;
  5. display: flex;
  6. flex-direction: row;
  7. transform: translate(-50%, -50%);
  8. }
  9. .loader-container div {
  10. height: 20px;
  11. width: 5px;
  12. background: #FE4A49;
  13. margin: 3px;
  14. border-radius: 25px;
  15. }
  16. .loader-container div:nth-child(1) {
  17. animation: loader 1s ease-in-out infinite 0s;
  18. }
  19. .loader-container div:nth-child(2) {
  20. animation: loader 1s ease-in-out infinite 0.1s;
  21. }
  22. .loader-container div:nth-child(3) {
  23. animation: loader 1s ease-in-out infinite 0.2s;
  24. }
  25. .loader-container div:nth-child(4) {
  26. animation: loader 1s ease-in-out infinite 0.3s;
  27. }
  28. .loader-container div:nth-child(5) {
  29. animation: loader 1s ease-in-out infinite 0.4s;
  30. }
  31. .loader-container div:nth-child(6) {
  32. animation: loader 1s ease-in-out infinite 0.5s;
  33. }
  34. .loader-container div:nth-child(7) {
  35. animation: loader 1s ease-in-out infinite 0.6s;
  36. }
  37. @keyframes loader {
  38. 0% {
  39. transform: scaleY(1);
  40. background: #FED766;
  41. }
  42. 25% {
  43. background: #009FB7;
  44. }
  45. 50% {
  46. transform: scaleY(2);
  47. background: #59CD90;
  48. }
  49. 75% {
  50. background: #FE4A49;
  51. }
  52. 100% {
  53. transform: scaleY(1);
  54. background: #D91E36;
  55. }
  56. }