CSSFX的loding效果

效果如下：

页面部分：

		<div class="dots"> 
            <div></div> 
            <div></div> 
            <div></div> 
        </div> 

css部分：

.dots {
     width: 1.5rem;
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
     justify-content: space-between;
 }

 .dots div {
     width: 0.4rem;
     height: 0.4rem;
     border-radius: 50%;
     background-color: #000000;
     animation: fade 0.8s ease-in-out alternate infinite;
 }

 .dots div:nth-of-type(1) {
     animation-delay: -0.4s;
 }

 .dots div:nth-of-type(2) {
     animation-delay: -0.2s;
 }

效果图：

页面部分：

    <div class="loadingdiv"></div>

css部分：

 .loadingdiv {
   width: .8rem;
   height: .96rem;
   border: 3px solid transparent;
   border-top-color: #666666;
   border-bottom-color: #666666;
   border-radius: 50%;
   animation: spin-stretch 2s ease infinite;
 }
 
 @keyframes spin-stretch {
   50% {
     transform: rotate(360deg) scale(0.4, 0.33);
     border-width: 8px;
   }
   100% {
     transform: rotate(720deg) scale(1, 1);
     border-width: 3px;
   }
 }
 

效果图：

页面部分：

        <div class="balls">
            <div></div>
            <div></div>
            <div></div>
        </div>

CSS部分：

.balls {
    width: 2rem;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
}

.balls div{
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background-color: #666666;
}

.balls div:nth-of-type(1) {
    transform: translateX(-100%);
    animation: left-swing 0.5s ease-in alternate infinite;
}

.balls div:nth-of-type(3) {
    transform: translateX(-95%);
    animation: right-swing 0.5s ease-out alternate infinite;
}

@keyframes left-swing {

    50%,
    100% {
        transform: translateX(95%);
    }
}

@keyframes right-swing {
    50% {
        transform: translateX(-95%);
    }

    100% {
        transform: translateX(100%);
    }
}

效果图：

html页面：

        <div class="loadingDiv">
            <span class="view_span"></span>
            <span class="view_span"></span>
            <span class="view_span"></span>
            <span class="view_span"></span>
        </div>

CSS部分：

.loadingDiv {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  width: .6rem;
}

.view_span {
  width: 0.1rem;
  height: .3rem;
  background-color: #666666;
}

.view_span:nth-of-type(1) {
  animation: grow 1s -0.45s ease-in-out infinite;
}

.view_span:nth-of-type(2) {
  animation: grow 1s -0.3s ease-in-out infinite;
}

.view_span:nth-of-type(3) {
  animation: grow 1s -0.15s ease-in-out infinite;
}

.view_span:nth-of-type(4) {
  animation: grow 1s ease-in-out infinite;
}

@keyframes grow {
  0%,
  100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(2);
  }
}

效果图：

页面部分：

	<div class="viewDiv"></div>

CSS部分：

.viewDiv {
     position: relative;
     width: 1rem;
     height: 1rem;
     border: 3px solid #3cefff;
     overflow: hidden;
     animation: spin 3s ease infinite;
 }

 .viewDiv::before {
     content: '';
     position: absolute;
     top: -3px;
     left: -3px;
     width: 1rem;
     height: 1rem;
     background-color: hsla(185, 100%, 62%, 0.75);
     transform-origin: center bottom;
     transform: scaleY(1);
     animation: fill 3s linear infinite;
 }

 @keyframes spin {

     50%,
     100% {
         transform: rotate(360deg);
     }
 }

 @keyframes fill {

     25%,
     50% {
         transform: scaleY(0);
     }

     100% {
         transform: scaleY(1);
     }
 }

效果图：

页面部分：

        <div class="dots">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>

CSS部分：

.dots {
     width: 1.5rem;
     height: 1.5rem;
     display: grid;
     grid-template-rows: repeat(3, 1fr);
     grid-template-columns: repeat(3, 1fr);
     justify-items: center;
     align-items: center;
 }

 .dots>div {
     width: 0.25rem;
     height: 0.25rem;
     background-color: #666666;
     border-radius: 50%;
     animation: fade 1.5s alternate ease-in-out infinite;
 }

 .dots>div:nth-of-type(2),
 .dots>div:nth-of-type(4) {
     animation-delay: 0.25s;
 }

 .dots>div:nth-of-type(3),
 .dots>div:nth-of-type(5),
 .dots>div:nth-of-type(7) {
     animation-delay: 0.5s;
 }

 .dots>div:nth-of-type(6),
 .dots>div:nth-of-type(8) {
     animation-delay: 0.75s;
 }

 .dots>div:nth-of-type(9) {
     animation-delay: 1s;
 }

 @keyframes fade {
     to {
         opacity: 0.2;
     }
 }