loading8.css 993 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. .lds-ellipsis {
  2. display: inline-block;
  3. position: relative;
  4. width: 64px;
  5. height: 35px;
  6. }
  7. .lds-ellipsis view {
  8. position: absolute;
  9. top: 5px;
  10. width: 11px;
  11. height: 11px;
  12. border-radius: 50%;
  13. background: #42b983;//可修改颜色
  14. animation-timing-function: cubic-bezier(0, 1, 1, 0);
  15. }
  16. .lds-ellipsis view:nth-child(1) {
  17. left: 6px;
  18. animation: lds-ellipsis1 0.6s infinite;
  19. }
  20. .lds-ellipsis view:nth-child(2) {
  21. left: 6px;
  22. animation: lds-ellipsis2 0.6s infinite;
  23. }
  24. .lds-ellipsis view:nth-child(3) {
  25. left: 26px;
  26. animation: lds-ellipsis2 0.6s infinite;
  27. }
  28. .lds-ellipsis view:nth-child(4) {
  29. left: 45px;
  30. animation: lds-ellipsis3 0.6s infinite;
  31. }
  32. @keyframes lds-ellipsis1 {
  33. 0% {
  34. transform: scale(0);
  35. }
  36. 100% {
  37. transform: scale(1);
  38. }
  39. }
  40. @keyframes lds-ellipsis3 {
  41. 0% {
  42. transform: scale(1);
  43. }
  44. 100% {
  45. transform: scale(0);
  46. }
  47. }
  48. @keyframes lds-ellipsis2 {
  49. 0% {
  50. transform: translate(0, 0);
  51. }
  52. 100% {
  53. transform: translate(19px, 0);
  54. }
  55. }