loading5.css 699 B

1234567891011121314151617181920212223242526272829303132333435
  1. .lds-ring {
  2. display: inline-block;
  3. position: relative;
  4. width: 64px;
  5. height: 64px;
  6. }
  7. .lds-ring view {
  8. box-sizing: border-box;
  9. display: block;
  10. position: absolute;
  11. width: 51px;
  12. height: 51px;
  13. margin: 6px;
  14. border: 6px solid #fff;
  15. border-radius: 50%;
  16. animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  17. border-color: #42b983 transparent transparent transparent;//可修改颜色
  18. }
  19. .lds-ring view:nth-child(1) {
  20. animation-delay: -0.45s;
  21. }
  22. .lds-ring view:nth-child(2) {
  23. animation-delay: -0.3s;
  24. }
  25. .lds-ring view:nth-child(3) {
  26. animation-delay: -0.15s;
  27. }
  28. @keyframes lds-ring {
  29. 0% {
  30. transform: rotate(0deg);
  31. }
  32. 100% {
  33. transform: rotate(360deg);
  34. }
  35. }