フロントエンド言語（HTML/CSS/JavaScript）のアウトプット練習帳です。第二回は、「円形のプログレスバー」を作ります。
1. プログレスバーの動きを確認する
See the Pen
Progressbar by design1096 (@design1096)
on CodePen.
まず、「Result」画面の円形プログレスバーの中にある「STOP」ボタンをクリックしてみてください。すると、プログレスバーの動きがストップし、ボタンの文字が「START」に変わります。また、「START」ボタンをクリックすると、止まっていたプログレスバーが再び動くことが確認出来ます。
2. 基本のHTML/CSSと配色
基本のHTML/CSS
まず、円形プログレスバーの基本のHTMLとCSSは、下記の記事を参考に作成しました。
分かりやすくまとめられているので、チェックしてみてください。
配色
プログレスバーの配色は「Hello Color」というサイトで見つけたものを使用しています。
画面をクリックすると、ランダムで二色の配色パターンが表示されます。自分の好みの配色がきっと見つかると思います。
3. JavaScript（CSSを変更する）
スタイルシート（オブジェクト）を取得する
var sheets = document.styleSheets;
また、今回はスタイルシートが複数存在する場合も想定して、JavaScriptを書いています。スイタイルシートの総数を知るには、下記のように記述します。
var sheetsNumber = document.styleSheets.length;
スタイルシートに規則を追加する
スタイルシートをfor文で回し、該当のクラス名に「insertRule」メソッドを使って、規則を追加しています。
sheets[i].insertRule (‘.circle::before { animation-play-state: paused }’, sheets[i].cssRules.length);
対象のクラス名は「.circle::before」と「.circle::after」で、STOPボタンがクリックされた時は、「animation-play-state: paused」、STARTボタンがクリックされた時は、「animation-play-state: running」、つまり、アニメーションの動きを「止める」と「走らせる」ようにしています。
第二回は「円形プログレスバー」のアウトプットを行いました。
※本記事のアイキャッチ画像は、「Unsplash」を使用しています。
