Sample code for CSS dynamic loading bar effect

Using the knowledge of CSS variables, I will directly post the code and the comments I added

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Show a CSS dynamic loading bar</title>
    <style>
      /* Using CSS variables */
      .flex {
        display: flex;
        list-style: none;
        /* Set the li elements to be arranged horizontally */
      }
 
      .loading {
        width: 200px;
        height: 200px;
      }
 
      .loading>li {
        /* We define a CSS variable for each inline element of the li element -- line-index has different sizes*/
        /* At this time, set an animation delay variable--time after calculation calc */
        --time: calc((var(--line-index) - 1) * 200ms);
        border-radius: 3px;
        width: 6px;
        height: 30px;
        background-color: #f66;
        /* The animations are all the same, but they start at different times, which results in this effect*/
        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

This is the end of this article about the CSS dynamic loading bar source code. For more relevant CSS dynamic loading bar content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: Summary of several APIs or tips in HTML5 that cannot be missed

>>: Several ways to schedule backup of MySQL database (comprehensive)