loading10.css 700 B

12345678910111213141516171819202122232425262728293031
  1. .lds-hourglass {
  2. display: inline-block;
  3. position: relative;
  4. width: 64px;
  5. height: 64px;
  6. }
  7. .lds-hourglass:after {
  8. content: " ";
  9. display: block;
  10. border-radius: 50%;
  11. width: 0;
  12. height: 0;
  13. margin: 6px;
  14. box-sizing: border-box;
  15. border: 26px solid #42b983;//可修改颜色
  16. border-color: #90E6E9 transparent #90E6E9 transparent;//可修改颜色
  17. animation: lds-hourglass 1.2s infinite;
  18. }
  19. @keyframes lds-hourglass {
  20. 0% {
  21. transform: rotate(0);
  22. animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  23. }
  24. 50% {
  25. transform: rotate(900deg);
  26. animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  27. }
  28. 100% {
  29. transform: rotate(1800deg);
  30. }
  31. }