loading.css 1.6 KB

123456789101112131415161718192021222324252627282930313233343536
  1. .loader-17 .css-square { position: absolute; top: 50%; width: 40upx; height: 12upx; background: #ffffff; }
  2. .loader-17 .square1 { left: 180upx; -webkit-animation: dominos 1s 0.125s ease infinite; animation: dominos 1s 0.125s ease infinite; }
  3. .loader-17 .square2 { left: 160upx; -webkit-animation: dominos 1s 0.3s ease infinite; animation: dominos 1s 0.3s ease infinite; }
  4. .loader-17 .square3 { left: 140upx; -webkit-animation: dominos 1s 0.425s ease infinite; animation: dominos 1s 0.425s ease infinite; }
  5. .loader-17 .square4 { left: 120upx; -webkit-animation: dominos 1s 0.540s ease infinite; animation: dominos 1s 0.540s ease infinite; }
  6. .loader-17 .square5 { left: 100upx; -webkit-animation: dominos 1s 0.665s ease infinite; animation: dominos 1s 0.665s ease infinite; }
  7. .loader-17 .square6 { left: 80upx; -webkit-animation: dominos 1s 0.79s ease infinite; animation: dominos 1s 0.79s ease infinite; }
  8. .loader-17 .square7 { left: 60upx; -webkit-animation: dominos 1s 0.9s ease infinite; animation: dominos 1s 0.9s ease infinite; }
  9. .loader-17 .square8 { left: 40upx; -webkit-animation: dominos 1s 1.01s ease infinite; animation: dominos 1s 1.01s ease infinite; }
  10. .loader-17 .square9 { left: 20upx; -webkit-animation: dominos 1s 1.10s ease infinite; animation: dominos 1s 1.10s ease infinite; }
  11. @keyframes dominos {
  12. 50% {
  13. opacity: 0.7;
  14. }
  15. 75% {
  16. -webkit-transform: rotate(90deg);
  17. transform: rotate(90deg);
  18. }
  19. 80% {
  20. opacity: 1;
  21. }
  22. }
  23. @keyframes ball-turn {
  24. 0% {
  25. -webkit-transform: rotate(0deg);
  26. transform: rotate(0deg);
  27. }
  28. 100% {
  29. -webkit-transform: rotate(360deg);
  30. transform: rotate(360deg);
  31. }
  32. }