简单的动态进度条一个简单的动态进度条效果源码（HTML+CSS）后记本文纯仅属于个人的一些简单的见解，比较浅显，

学习过程中的简单记录，若问题敬请指教！文章持续更新中...

路过的朋友，可以点个赞，关注一下~~~

一个简单的动态进度条

效果

源码（HTML+CSS）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>测试</title>

  <style>
    .app-main {
      width: 100%;
      height: 800px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .progress {
      width: 300px;
      height: 20px;
      background: #d1e1f1;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 5px 5px 5px #eff7fe, 5px -5px 5px #eff7fe, -5px 5px 5px #eff7fe, -5px -5px 5px #eff7fe;
    }

    .progress-bar {
      width: 0;
      height: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      background: #057ce4d6;
      background-image: linear-gradient(135deg,
          #b4d8f7 30%,
          transparent 30%,
          transparent 50%,
          #b4d8f7 50%,
          #b4d8f7 75%,
          transparent 75%,
          transparent);
      background-size: 40px 40px;
      transition: width 0.6s ease;
      border-radius: 10px;
      animation: progress-bar-anim 0.5s linear infinite;
    }

    .progress-bar-value {
      font-size: 13px;
      font-weight: bold;
      color: #fff;
      margin-right: 5px;
    }

    @keyframes progress-bar-anim {
      from {
        background-position: 0 0;
      }

      to {
        background-position: 40px 0;
      }
    }
  </style>
</head>

<body>
  <div class="app-main">
    <div class="progress">
      <div class="progress-bar" style=" width:80%">
        <span class="progress-bar-value">80%</span>
      </div>
    </div>

  </div>
</body>

</html>

后记

本文纯仅属于个人的一些简单的见解，比较浅显，若有不妥之处还请不吝赐教！！！(☆_☆)

如果本文对你有所帮助，欢迎点赞！！！

o(￣▽￣)ｄ