CSSでグラデーションのかかったプログレスバーを作る方法と注意点

この記事ではグラデーションのかかったプログレスバーの作り方を紹介します。CSSのlinear-gradientを用いて作成しますが、linear-gradientの仕様をきちんと理解していないと綺麗なプログレスバーになりません。そこでCSSのlinear-gradientを使う際の注意点を、失敗しない作り方について説明します。

グラーデーションのかかったプログレスバーの完成形

完成形のデモ

デモを用意しました。
スクロールに連動してプログレスバーが伸縮します。下にスクロールしてみて下さい。

なお、例1(good)と例2(bad)の2つを用意しております。

多くの場合「例1」が望ましい動作かと思います。
以下、例1を「良い例」、例2を「悪い例」として説明します。

実装の際に少し注意しないと悪い例のようになってしまいます。

プログレスバーのコードの解説

作り方

今回作成した方法はdivを2つ重ねてスクリプトで幅を伸縮する方法です。
グラデーションはCSSのlinear-gradientを使用して描画しております。

<div class="progressbar">
  <div></div>
</div>

• 片方のdivでプログレスバーの表示領域及びマスクを描画
• もう片方のdivでグラデーションのプログレスバーを描画

ここで注意しなくてはならないことが、どちらのdivをプログレスバーの描画に使用するかということです。CSSのlinear-gradientの仕様をきちんと理解しないと悪い例のようなプログレスバーとなってしまいます。

注意点：linear-gradientの仕様を理解する

linear-gradientの値は、始点から終点までの色の変化を指定しています。
よって、伸縮させるプログレスバーにグラデーションを設定してしまうと、グラデーションも伸縮してしまいます。

必ずマスクを伸縮させる

グラデーションのかかった領域は予め全て描画しておきます。
その上にマスクをかけ、マスクを伸縮させることでプログレスバーが伸縮しているように見せます。

まとめ

グラデーションのかかったプログレスバーの作り方を紹介しました。
プログレスバーにlinear-gradientを指定したとき、バーが短くても長くても始点から終点まで色が変化することも説明しました。
今回作成したプログレスバーに限らず、このグラデーションの仕様は覚えておく必要がありそうです。