Vue.jsでライブラリを使わずに進捗バーを表示するシンプルな方法です。
基本はJavaScriptのため、考え方は他のフレームワークでも生のJavaScriptでも同じです。
Vue.jsで進捗バーの表示する方法
やることは3つだけです。dataに進捗のパーセント（初期値0）を持ち、バーの div に :style で width を渡し、「次へ」のクリックで進捗を足していきます。
CSSの transition を付けておけば、幅が変わるたびにバーがなめらかに伸びます。ライブラリは不要です。
ポイント
- 進捗を管理するためのクラスを作る
- 動的にしたいので、:styleを使う。
- クラスが100%になったらそれ以上増えないようにv-ifを設定する
- 進捗はパーセントで管理したいので初期値は0で設定する
- メソッドは次へなどのボタンが押されたら発火するようにする
- 計算方法は100をデータのlengthで割ったものを変数に足していく
コード例
template
<!-- 進捗表示 -->
<div class="step-progress" :style="('width: ' + progress + '%')"></div>
<!-- 進捗が100％になったら非表示にする -->
<div class="box-button" v-if="progress < 100">
<button @click="nextQuestion" :class="isQuestionAnswered ? 'selectable': ''">>次へ</button>
</div>まず、進捗に合わせてスタイルを動的に変えたいので、v-bindでstyle属性を付与します。
そして、メソッドを作成して、そのメソッドを発火したら0％から100％へと変化していくようにします。
ただし、メソッドは基本的に足し算のため100％を超えてしまいます。メソッド側で調整するか、上のようにv-ifで100以上になったらメソッドを発火するボタン自体を消します。
data()
progress: 0, // 進捗のカウント初期値は0％の0としておきます。
methods
nextQuestion() {
// 進捗状況を進める
// 質問4つなら100 / 4 = 25、を0,25,50,75,100と足していけばいい
this.progress= this.progress + (100/this.questions.length)
},lengthを使って、データの総数で100%を割ります。
変数にどんどん足していけば進捗の％が進みます。
それにcssを適用すれば進捗表示になります。
質問数で割り切れないときの注意
質問が3つや6つのように100を割り切れない数だと、足し算の結果が 100.00000000000001 のような小数になり、progress < 100 の判定がずれることがあります。
足し算ではなく「答えた数 ÷ 総数 × 100」を毎回計算すると、最後は必ず100になります。dataに answered: 0 を追加して、次のように書きます。
nextQuestion() {
this.answered += 1
this.progress = Math.min(100, Math.round(this.answered / this.questions.length * 100))
},Vue 3でもOptions APIならこのまま動きます。<script setup> で書く場合は、progress を ref(0) にして同じ計算をするだけです。
css
.step-progress {
display: flex;
width: 100%;
height: 5px;
background-color: #00416a;
transition: 0.5s;
}:classと:styleの違いについては【Vue.js】:classと:styleについてを参考にしてみてください。
スクロール量に応じて表示を切り替える例はVue 3でスクロールすると出てくる「トップへ戻る」ボタンの作り方、要素が画面に入ったタイミングで動かす例はVue.jsで要素がスクロール画面に現れたらアニメーションさせる方法で紹介しています。