JavaScriptをベースに、SVGを使い、画面上でカスタマイズできる進捗表示です。サンプルの水色の円をクリックすると、SVGを使ったアニメーション効果でそこに移動してステップ位置などを表現します。この要素の単位や個数などを画面上でカスタマイズできます。

「設定入力・表示非表示切り替え」ボタンをクリックすると、3つの入力欄が出ます。その内容は左から表示用数値(個数を含む)、時間や量などの単位表示になっていますので、この値を書き換え「update」ボタンをクリックすると、変更が反映されます。もう一度「設定入力・表示非表示切り替え」ボタンをクリックすると、入力欄は隠れます。また、初期の値は、外部のjsファイルの「data:」に入っています。

 


{{ points[0] }} {{ label }} {{ point }} {{ label }}

 

 

 

引用と参考;https://codepen.io/JosephAllen/pen/EQbwNV
戻るボタン