loading-dots.module.css 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. .loading {
  2. display: inline-flex;
  3. align-items: center;
  4. }
  5. .loading .spacer {
  6. margin-right: 2px;
  7. }
  8. .loading span {
  9. animation-name: blink;
  10. animation-duration: 1.4s;
  11. animation-iteration-count: infinite;
  12. animation-fill-mode: both;
  13. width: 5px;
  14. height: 5px;
  15. border-radius: 50%;
  16. display: inline-block;
  17. margin: 0 1px;
  18. }
  19. .loading span:nth-of-type(2) {
  20. animation-delay: 0.2s;
  21. }
  22. .loading span:nth-of-type(3) {
  23. animation-delay: 0.4s;
  24. }
  25. .loading2 {
  26. display: inline-flex;
  27. align-items: center;
  28. }
  29. .loading2 .spacer {
  30. margin-right: 2px;
  31. }
  32. .loading2 span {
  33. animation-name: blink;
  34. animation-duration: 1.4s;
  35. animation-iteration-count: infinite;
  36. animation-fill-mode: both;
  37. width: 4px;
  38. height: 4px;
  39. border-radius: 50%;
  40. display: inline-block;
  41. margin: 0 1px;
  42. }
  43. .loading2 span:nth-of-type(2) {
  44. animation-delay: 0.2s;
  45. }
  46. .loading2 span:nth-of-type(3) {
  47. animation-delay: 0.4s;
  48. }
  49. @keyframes blink {
  50. 0% {
  51. opacity: 0.2;
  52. }
  53. 20% {
  54. opacity: 1;
  55. }
  56. 100% {
  57. opacity: 0.2;
  58. }
  59. }