纯css实现动态条形加载条效果「附源码」-猿码集

纯CSS实现动态条形加载条效果

在前端开发中，加载动画是非常常见的一种场景。在用户进入页面的短暂等待时间内，通过加载动画可以让用户更好的感受到加载进度，并增强用户体验。在这篇文章中，我们将介绍如何通过纯 CSS 实现动态的条形加载条。

什么是动态加载条？

动态加载条是一种能够模拟进度条的加载动画，用户可以在加载的过程中看到进度的推进，提高用户体验。通常，加载条分为两种状态：静态状态和动态状态。

静态状态是指加载条在页面加载开始之前，没有动画效果的状态。而动态状态则是指在加载过程中通过动画效果展现出加载的进度。

动态加载条的实现方式有很多，其中基于纯 CSS 实现是一种速度快，可定制性较高的一种方式。

CSS实现动态加载条的核心思路

实现动态加载条的核心思路是通过 CSS 动画来实现，以下是核心的 CSS 代码：


  .loading-bar {
    width: 100%;
    height: 10px;
    position: relative;
    overflow: hidden;
    background-color: #e1e1e1;
    .bar {
      width: 1px;
      height: 100%;
      background-color: #b8b8b8;
      position: absolute;
      left: 0;
      top: 0;
      animation: move 2s linear infinite;
    }
  }
  @keyframes move {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }

通过 CSS 代码中的 animation 属性，我们设置了 move 动画，同时设置了动画的时间和执行方式。

接下来，我们将在 .loading-bar 中设置 .bar 的初始宽度为1px，并通过设置 animation：move 2s linear infinite 属性来使得.bar 元素可以自动滚动。

我们还定义了一个名为 move 的动画，通过 transform 属性设置 bar 元素的平移效果实现了移动。

最后通过 @keyframes 设置了 move 动画从开始到结束的过渡效果，使得.bar 元素从左侧移动到右侧，形成了一个不断滚动的动画效果。

动态加载条的使用

使用动态加载条非常简单，只需在 HTML 中添加以下代码即可：


  <div class="loading-bar">
    <div class="bar"></div>
  </div>

这是一个基本的加载条结构，在加载条的外层包裹一个 .loading-bar 类，内层元素 .bar 内置动画，通过元素的宽度按一定的时间变化实现了加载进度的模拟。

参考示例

这是一个完整的 CSS 动态加载条代码，通过自定义样式可以实现更加丰富的效果。


  .loading-bar {
    width: 100%;
    height: 10px;
    position: relative;
    overflow: hidden;
    background-color: #e1e1e1;
  }
  .bar {
    width: 1px;
    height: 100%;
    background-color: #b8b8b8;
    position: absolute;
    left: 0;
    top: 0;
    animation: move 2s linear infinite;
  }
  @keyframes move {
    0% {
      transform: translateX(-100%);
    }
    25% {
      background-color: #ffe8e8;
    }
    50% {
      background-color: #ffd4d4;
      transform: translateX(-30%);
      width: 4px;
    }
    75% {
      background-color: #ffbaba;
      transform: translateX(30%);
      width: 50%;
    }
    100% {
      background-color: #b8b8b8;
      transform: translateX(100%);
      width: 1px;
    }
  }

总结

通过使用纯 CSS 实现动态加载条，我们可以更加轻松的定制自己需要的加载条样式。同时，这种方式能够快速地在页面上添加一个加载条，提升用户体验。在实际的开发中，我们可以根据具体的需求进行进一步的改进和开发，实现更加多样化且体验更加友好的加载动画效果。

纯css实现动态条形加载条效果「附源码」