Vue.jsでYouTubeのようなローディングバーを実装する「vue2-loading-bar」

vue2-loading-barとは

vue2-loading-barは、YouTubeのようなローディングバーを実装するコンポーネントライブラリです。

【動画サイズ：34KB】

環境

この記事は、以下の管理人の検証環境にて記事にしています。

ライブラリの取得

ライブラリを取得するには、npm, CDNのどれか一つを使用します。

npm install vue2-loading-bar

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/vue2-loading-bar.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/src/css/loading-bar.css">

gitリポジトリは以下から取得できます。

導入手順

管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。
このサンプルでは、YouTubeのようなローディングバーを実装します。

step
1ライブラリの呼び出し

まずライブラリを呼び出す為に、以下で呼び出します。

const LoadingBar = window['LoadingBar'];

step
2メソッドを設定

new Vue({
  el: '#app',
  components: {
    LoadingBar: LoadingBar
  },
  data: {
    progress: 0,
    error: false,
    direction: 'right'
  },
  methods: {
    progressTo: function (val) {
      this.progress = val;
    },
    setToError: function (bol) {
      this.error = bol;
    },
    changeDirection: function (direction) {
      if(this.progress >= 0){
        this.progress = 100;
      }
      this.direction = this.direction === 'right' ? 'left' : 'right';
    },
    errorDone:function(){
      this.error = false
    },
    progressDone:function() {
      this.progress = 0
    },
  },
  mounted: function () {
    var me = this;
    me.progress = 10;
    for (var i = 0; i < 30; i++) {
      if(i > 20 && i < 29){
        setTimeout(function () {
          me.progress += 5;
        },50*i);
      }else{
        setTimeout(function () {
          me.progress ++;
        },10*i);
      }
    }
    setTimeout(function () {
      me.progress = 100;
    },1500);
  }
});

step
3テンプレートを準備

<loading-bar>コンポーネントを設置します。
各種プロパティの説明はこちら

サンプルはケバブケースで記載しています。

<div id="app">
  <loading-bar
    :on-error-done="errorDone"
    :on-progress-done="progressDone"
    :progress="progress"
    :direction="direction"
    :error="error" >
  </loading-bar>
  <div>
    <p align="center">Progress is {{ progress }}%</p>
    <div class="button-container">
      <button type="button" @click="progressTo(30)">Progress to 30</button>
      <button type="button" @click="progressTo(50)">Progress to 50</button>
      <button type="button" @click="progressTo(100)">Progress to 100</button>
      <button type="button" @click="changeDirection">Change Direction</button>
      <button class="error" type="button" @click="setToError(true)">Give An Error</button>
    </div>
  </div>
</div>

サンプル

今回のソースを実際に触って確認できるようにデモを用意しました。

See the Pen Vue.jsでYouTubeのようなローディングバーを実装する「vue2-loading-bar」 by カバの樹 (@kabanoki) on CodePen.dark

さいごに

YouTubeのようなローディングバーを実装するコンポーネントライブラリでした。

今日はこの辺でー