tiroblog

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

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

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

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

Bootstrapの機能を詳しく知りたい！という方はこちらの書籍がおススメです。

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

 

ティロ

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

その辺の理系大学生です

 

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

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

関連記事
Bootstrapの使い方【導入から分かりやすく解説します】

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の最新記事8件