Home >Web Front-end >CSS Tutorial >Pure css to achieve dynamic bar loading bar effect (source code attached)

Pure css to achieve dynamic bar loading bar effect (source code attached)

青灯夜游forward: 2021-05-18 10:05:212372browse

This article will introduce to you how to achieve the dynamic bar loading bar effect using pure CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Using the knowledge of css variables, directly upload the code and the comments I added

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>展示一个css动态条形加载条</title>
    <style>
      /* 使用CSS变量 */
      .flex {
        display: flex;
        list-style: none;
        /* 设定li元素横向排列 */
      }
 
      .loading {
        width: 200px;
        height: 200px;
      }
 
      .loading>li {
        /* 我们在每一个li元素的行内元素都定义了一个css变量 --line-index大小不同 */
        /* 此时定一个动画延迟的变量--time 经过计算calc */
        --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);
        }
      }
    </style>
  </head>
  <body>
    <ul class="loading flex">
      <li style="--line-index: 1;"></li>
      <li style="--line-index: 2;"></li>
      <li style="--line-index: 3;"></li>
      <li style="--line-index: 4;"></li>
      <li style="--line-index: 5;"></li>
      <li style="--line-index: 6;"></li>
    </ul>
  </body>
</html>

See the effect

Very beautiful and smooth

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of Pure css to achieve dynamic bar loading bar effect (source code attached). For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete

Previous article：What does padding mean in cssNext article：What does padding mean in css

See more

Pure css to achieve dynamic bar loading bar effect (source code attached)

Related articles