【Bootstrap 便利なコンポーネント】プログレス表示の仕方を分かりやすく解説します

プログレス表示ってなんだ?

プログレス表示を使ってみたい

そんな方向けの記事です。

 

ティロ

こんにちは、ティロといいます

その辺の理系大学生です

 

その前にBootstrapというcssとjavascriptのフレームワークを使うのでBootstrapをhead内に読み込みます。

Bootstrapってなんぞや?という方はこちらの記事をどうぞ!

関連記事

Bootstrapってなに?Bootstrapの基本的な使い方が知りたい ティロこんにちは、ティロといいます Bootstrapを使うと何が良いのか、また基本的な使い方[…]

bootstrapの導入から使い方

Bootstrapをcdnで読み込む

以下のコードをhead内に貼り付けてください。

 

 

プログレス表示の仕方

プログレス表示とはどんなものなのか、まずはサンプルをご覧ください。

 

プログレス表示のサンプル

コードはこんな感じです。

 

使用するクラスは以下の通りです。

progressプログレスの枠を作る
progress-barプログレス表示のバーを表示する
w-(25,50,75,100)widthの設定、数字はパーセント

 

mb-4やmt-5もBootstrapの機能でマージンを取ります。

具体的にはこんな感じです。

m-(1,2,3,4,5) 1=0.25rem=4px 例:m-5 全方向に0.25rem×5(20px)のマージンを取る全方向にマージンを取る
mt-(1,2,3,4,5)上にマージンを取る
mb-(1,2,3,4,5)下にマージンを取る
mr-(1,2,3,4,5)右にマージンを取る
ml-(1,2,3,4,5)左にマージンを取る
mx-(1,2,3,4,5)左右(x軸方向)にマージンを取る
my-(1,2,3,4,5)上下(y軸方向)にマージンを取る

 

プログレスバーが何パーセントか数字を入れたい場合があると思います。

方法は簡単で以下のようにするだけです。

プログレスバーに数字を入れる

 

プログレスバーをカスタマイズしたい

色を変えたい

プログレスバーの色を変えます。

色の変え方はclass=”progress”にbg-(色の指定)を加えるだけです。

色は以下の通りです。

bg-primary
bg-secondaryグレー
bg-success
bg-warning
bg-info水色
bg-light薄いグレー
bg-dark濃いグレー
bg-white
bg-transparent透明
bg-dangerオレンジ

 

See the Pen
WNxYgZJ
by hiro web制作とブログ (@hiroweb9)
on CodePen.

同じようにバーの枠の色も変えることが出来ます。

 

See the Pen
xxOQaWb
by hiro web制作とブログ (@hiroweb9)
on CodePen.

 

ストライプを使いたい

class=”progress-bar”にprogress-bar-stripedを追加するだけです。

ストライプ

 

プログレスバーをアニメーションさせたい

プログレスバーのストライプ模様をアニメーションさせることができます。

以下のクラスをclass=”progress-bar”に追加します。

progress-bar-stripedプログレスバーをストライプにします
progress-bar-animatedプログレスバーをアニメーションさせます

 

See the Pen
eYzQQOW
by hiro web制作とブログ (@hiroweb9)
on CodePen.

 

いかがでしたでしょうか?

Bootstrapの機能をもっと知りたい!という方はこちらの書籍がおススメです。

Bootstrapの機能はほぼ載っています。

また実際にサイトを作りながら勉強したい!という方はこちらがおすすめです.