CSS动态条形加载条效果的示例代码

运用了css变量的知识，直接上代码及其我加的注释

  
    
    
    
      
      .flex {
 display: flex;
 list-style: none;
 
      }
 
      .loading {
 width: 200px;
 height: 200px;
      }
 
      .loading>li {
 
 
 --time: calc((var(--line-index) - 1) * 200ms);
 border-radius: 3px;
 width: 6px;
 height: 30px;
 background-color: #f66;
 
 animation: beat 1.5s ease-in-out var(--time) infinite;
 
      }
 
      .loading>li+li {
 margin-left: 5px;
      }
 
      @keyframes beat {
 
 0%,
 100% {
   transform: scaleY(1);
 }
 
 50% {
   transform: scaleY(.5);
 }
      }
    
  
  
    

      

      

      

      

      

      

    
  

看效果

到此这篇关于CSS动态条形加载条源码的文章就介绍到这了,更多相关css动态条形加载条内容请搜索考高分网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持考高分网！