1.弹跳加载

image.png

  1. <div class="bouncing-loader">
  2.   <div></div>
  3.   <div></div>
  4.   <div></div>
  5. </div>
  1. @keyframes bouncing-loader {
  2.   from {
  3.     opacity: 1;
  4.     transform: translateY(0);
  5.   }
  6.   to {
  7.     opacity: 0.1;
  8.     transform: translateY(-1rem);
  9.   }
  10. }
  11. .bouncing-loader {
  12.   display: flex;
  13.   justify-content: center;
  14. }
  15. .bouncing-loader > div {
  16.   width: 1rem;
  17.   height: 1rem;
  18.   margin: 3rem 0.2rem;
  19.   background: #8385aa;
  20.   border-radius: 50%;
  21.   animation: bouncing-loader 0.6s infinite alternate;
  22. }
  23. .bouncing-loader > div:nth-child(2) {
  24.   animation-delay: 0.2s;
  25. }
  26. .bouncing-loader > div:nth-child(3) {
  27.   animation-delay: 0.4s;
  28. }

2.环形旋转器(转圈加载)

image.png

  1. <div class="donut"></div>
  1. @keyframes donut-spin {
  2.   0% {
  3.     transform: rotate(0deg);
  4.   }
  5.   100% {
  6.     transform: rotate(360deg);
  7.   }
  8. }
  9. .donut {
  10.   display: inline-block;
  11.   border: 4px solid rgba(0, 0, 0, 0.1);
  12.   border-left-color: #7983ff;
  13.   border-radius: 50%;
  14.   width: 30px;
  15.   height: 30px;
  16.   animation: donut-spin 1.2s linear infinite;
  17. }