原生 js 實現一個有動畫效果的進度條插件 progress

效果圖：

項目地址：https://github.com/biaochenxuying/progress

效果體驗地址： https://biaochenxuying.github.io/progress/index.html

1. 原理

• 一個用於裝載進度條內容的 div （且叫做 container）。
• 然後在 container 裏面動態生成三個元素，一個是做爲背景的 div (且叫做 progress)，一個是做爲顯示進度的 div (且叫做 bar)，還有一個是顯示文字的 span (且叫做 text)。
• progress 的寬爲 100%，bar 的寬根據傳入數值 target 的值來定（ 默認爲 0 ，全部佔滿的值爲 100 ），text 展示的文字爲 bar 的寬佔 progress 寬的百分比。
• bar 的寬從 0 逐漸增加到的 target 值的過程（ 比如： 0 > 80 ），給這個過程添加一個逐漸加快的動畫。

2. 代碼實現

具體的過程請看代碼：

/*
* author: https://github.com/biaochenxuying
*/

(function() {
  function Progress() {
    this.mountedId = null;
    this.target = 100;
    this.step = 1;
    this.color = '#333';
    this.fontSize = '18px';
    this.borderRadius = 0;
    this.backgroundColor = '#eee';
    this.barBackgroundColor = '#26a2ff';
  }

  Progress.prototype = {
    init: function(config) {
      if (!config.mountedId) {
        alert('請輸入掛載節點的 id');
        return;
      }

      this.mountedId = config.mountedId;
      this.target = config.target || this.target;
      this.step = config.step || this.step;
      this.fontSize = config.fontSize || this.fontSize;
      this.color = config.color || this.color;
      this.borderRadius = config.borderRadius || this.borderRadius;
      this.backgroundColor = config.backgroundColor || this.backgroundColor;
      this.barBackgroundColor =
        config.barBackgroundColor || this.barBackgroundColor;

      var box = document.querySelector(this.mountedId);
      var width = box.offsetWidth;
      var height = box.offsetHeight;
      var progress = document.createElement('div');
      progress.style.position = 'absolute';
      progress.style.height = height + 'px';
      progress.style.width = width + 'px';
      progress.style.borderRadius = this.borderRadius;
      progress.style.backgroundColor = this.backgroundColor;

      var bar = document.createElement('div');
      bar.style.float = 'left';
      bar.style.height = '100%';
      bar.style.width = '0';
      bar.style.lineHeight = height + 'px';
      bar.style.textAlign = 'center';
      bar.style.borderRadius = this.borderRadius;
      bar.style.backgroundColor = this.barBackgroundColor;

      var text = document.createElement('span');
      text.style.position = 'absolute';
      text.style.top = '0';
      text.style.left = '0';
      text.style.height = height + 'px';
      text.style.lineHeight = height + 'px';
      text.style.fontSize = this.fontSize;
      text.style.color = this.color;

      progress.appendChild(bar);
      progress.appendChild(text);
      box.appendChild(progress);

      this.run(progress, bar, text, this.target, this.step);
    },
    /**
     * @name 執行動畫
     * @param progress 底部的 dom 對象
     * @param bar 佔比的 dom 對象
     * @param text 文字的 dom 對象
     * @param target 目標值（ Number ）
     * @param step 動畫步長（ Number ）
     */
    run: function(progress, bar, text, target, step) {
      var self = this;
      ++step;
      var endRate = parseInt(target) - parseInt(bar.style.width);
      if (endRate <= step) {
        step = endRate;
      }
      var width = parseInt(bar.style.width);
      var endWidth = width + step + '%';
      bar.style.width = endWidth;
      text.innerHTML = endWidth;

      if (width >= 94) {
        text.style.left = '94%';
      } else {
        text.style.left = width + 1 + '%';
      }

      if (width === target) {
        clearTimeout(timeout);
        return;
      }
      var timeout = setTimeout(function() {
        self.run(progress, bar, text, target, step);
      }, 30);
    },
  };

  // 註冊到 window 全局
  window.Progress = Progress;
})();

3. 使用方法

  var config = {
    mountedId: '#bar',
    target: 8,
    step: 1,
    color: 'green',
    fontSize: "20px",
    borderRadius: "5px",
    backgroundColor: '#eee',
    barBackgroundColor: 'red',
  };
  var p = new Progress();
  p.init(config);

4. 最後

• 筆者的博客後花圓地址如下：

github ：https://github.com/biaochenxuying/blog
個人網站 ：http://biaochenxuying.cn/main.html

如果您覺得這篇文章不錯或者對你有所幫助，請給個讚唄，你的點贊就是對我最大的鼓勵，謝謝。

微信公衆號：BiaoChenXuYing
分享 前端、後端開發等相關的技術文章，熱點資源，隨想隨感，全棧程序員的成長之路。
關注公衆號並回復 福利 便免費送你視頻資源，絕對乾貨。
福利詳情請點擊： 免費資源分享--Python、Java、Linux、Go、node、vue、react、javaScript