【CSS】前端点点点加载小点样式css动画过程实现

对话的 ... 加载动画，直接用 CSS 就可以实现，样式可以自己改，逻辑大差不差

 <div class="loading-text">
	 <span class="dot1"></span>
	 <span class="dot2"></span>
	 <span class="dot3"></span>
 </div>

          .loading-text {
    
    
            > span {
    
    
              display: inline-block;
              width: 10px;
              height: 10px;
              background-color: $color;
              border-radius: 50%;
              & + span {
    
    
                margin-left: 5px;
              }
            }
            .dot1 {
    
    
              animation: dot 1s infinite;
            }
            .dot2 {
    
    
              animation: dot 1s infinite 0.2s;
            }
            .dot3 {
    
    
              animation: dot 1s infinite 0.4s;
            }
            .dot4 {
    
    
              animation: dot 1s infinite 0.6s;
            }
            @keyframes dot {
    
    
              0% {
    
    
                opacity: 0;
              }
              50% {
    
    
                opacity: 1;
              }
              100% {
    
    
                opacity: 0;
              }
            }
          }