进度条的实现

之前在项目中用到了进度条NProgress,想着读一下源码，结果不是很能看懂，那就变换下思路，自己实现看看
参考学习：https://juejin.cn/post/7026531307433754661

1. HTML实现

HTML5提供了两个原生标签

<meter>

显示已知范围的标量值或者分数值

<p>
    <span>完成度：</span>
    <meter min="0" max="500" value="350" style="width: 200px;">350 degrees</meter>
</p>

<progress>

显示一项任务的完成进度

<p>
    <label for="file">完成度：</label>
    <progress max="100" value="70" style="width: 200px;"> 70% </progress>
</p>

效果如下：

但是我们都知道，最先出场的一般最拉跨。

缺点

• 我们无法有效的修改 <meter> 和 <progress> 标签的样式，譬如背景色，进度前景色等
• 浏览器默认样式的表现在不同浏览器之间并不一致
• 无法给他添加一些动画效果、交互效果

2. CSS

背景色加百分比

<span style="display: block;">background：</span>
        <div class="g-container">
            <div class="g-progress"></div>
        </div>

.g-container {
    width: 240px;
    height: 25px;
    border-radius: 25px;
    background: #eee;
}
.g-progress {
    width: 50%;
    height: inherit;
    border-radius: 25px 0 0 25px;
    background: #0f0;
}

实际效果：

优点

• 利用 HTML style 属性填写完整的 width 值
• 更推荐使用 CSS 自定义属性<div class="g-progress" style="--progress: 50%"></div>配合width: var(--progress)
• 完全的自定义样式，以及可以轻松的添加辅助丰富的动画和交互效果(transition)

单标签渐变

<span style="display: block;">linear-gradient：</span>
<div class="g-progress"></div>

.g-progress {
    width: 240px;
    height: 25px;
    border-radius: 25px;
    background: linear-gradient(90deg, #0f0, #0ff 70%, transparent 0);
    border: 1px solid #eee;
}

缺点

• 目前的CSS不支持渐变过渡变换（transition)

CSS @property

借助 CSS @property可以实现 // 这里原作者实现，我还在研究

<span style="display: block;">property linear-gradient：</span>
<div class="g-progressTwo" style="--progress: 70%"></div>

@property --progress {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.g-progressTwo {
    margin: auto;
    width: 240px;
    height: 25px;
    border-radius: 25px;
    background: linear-gradient(90deg, #0f0, #0ff var(--progress), transparent 0);
    border: 1px solid #eee;
    transition: .3s --progress;
}

3.js

<h1>JavaScript 百分比进度条</h1>

<div id="myProgress">
  <div id="myBar">10%</div>
</div>

<br>
<button onclick="move()">点我</button>

#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 10%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}

function move() {
  var elem = document.getElementById("myBar");   
  var width = 10;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%'; 
      elem.innerHTML = width * 1  + '%';
    }
  }
}

遗留待读：Houdini