Progress Bar UI Components vue.js ライブラリ

Vue.jsでスクロールの進行状況プログレスバーを実装する「vue-read-progress」

vue-read-progressとは

vue-read-progressは、ページのスクロールの進行状況をプログレスバーで表示できるコンポーネントライブラリです。

 

【動画サイズ:1.6MB】

 

環境

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

vue.js 2.6.10
vue-read-progress 1.0.4

 

ライブラリの取得

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

npm

npm i vue-read-progress 

yarn

yarn add vue-read-progress

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-read-progress.umd.js"></script>

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

 

導入手順

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

 

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

まずライブラリを呼び出す為に、以下の2通りのケースで呼び出します。

ES6等で実装する場合

import VueReadProgress from "vue-read-progress";

UMDで実装する場合

const VueReadProgress = window['VueReadProgress']; 

 

step
2
メソッドを設定


上記で取得したVueReadProgresscomponentsに取り込みます。

new Vue({
  el: '#app',
  components: {
    'vue-read-progress': VueReadProgress
  }
});

 

step
3
テンプレートを準備

<vue-read-progress>タグを配置します。

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

<div id="app">
  <vue-read-progress></vue-read-progress>
  <p v-for="n in 10">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis sem quis quam imperdiet imperdiet ac id lectus. Aenean tristique quis ipsum vel pretium. Fusce efficitur sem massa, sit amet eleifend mauris lobortis pharetra. Suspendisse dignissim tortor at venenatis faucibus. Donec efficitur vitae metus vel rhoncus. 
  </p>
</div>

 

サンプル

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

See the Pen Vue.jsでスクロールの進行状況クロールバーを実装する「vue-read-progress」 by カバの樹 (@kabanoki) on CodePen.dark

 

さいごに

ページのスクロールの進行状況をプログレスバーで表示できるコンポーネントライブラリでした。

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-Progress Bar, UI Components, vue.js, ライブラリ
-, , , , ,