先日react-circleの話題を書きましたが、今回はcssを使ってプログレスバーを作るまでを書いていきたいと思います。
react-circleの手軽さは前回の記事の通り。カスタイマイズもしやすくそれほど重くなく公式にならって書くだけで
簡単にプログレスバーが作れてしまいます。
このようにreactをライブラリとして使っている以上は使わない以外の道はないくらい鉄板ですが、今回はあえてreactを
使っていない状態でのプログレスバーの作り方を書いていきます。
じゃあどんなプラグインを使うの？と思いますが、今回はcssだけで作ります。
といっても丸とかアニメーションとか一から全部作るわけでなくsvgと絡めて作ります。
ベースとなるhtmlがこちら。
</pre> <svg height="100" width="100"> <circle cx="50" cy="50" r="10" stroke="#07b9f5" stroke-width="4" fill="#fff"/> </svg> <pre>
svgタグを使って定義しています。中のインライン要素circleが、今回対象となるプログレスバーになります。
cx,cyとありますが、これは対象となる丸の座標を意味します。cxにおいては0が一番左、数を増やせば増やすほど座標が右に移動し、cyにおいては
0が一番上、同じように数を増やせば増やすほど座標が下に移動します。
rが丸の大きさです。値を小さくするほど丸が小さくなります。
表示に関しての重要な部分は以上。strokeとfillは色関係なので割愛します。
htmlが終わったら次はcssでアニメーションの設定をしていきます。
</pre>
svg {
transform: rotate(-90deg);
stroke-dasharray: 200;
stroke-dashoffset: 200;
animation: offsettozero 5s linear forwards;
}
@keyframes offsettozero {
to {
stroke-dashoffset: 0;
}
}
<pre>
定義の際はそのままsvgと書きます。ここでアニメーションや線の太さを調節します。
stroke-dasharrayは線と線との間隔を指しています。この数値が大きいほど線と線との間隔が長くなっていきます。
stroke-dashoffsetは線の開始時を指しており、このプロパティに指定した値の位置から描画がスタートします。
これで基本情報は全て設定完了です。十数行でプログレスバーを作ることができました。
stroke-dasharrayとstroke-dashoffsetは少しいじっただけでは実態が掴みづらいと思いますが
触ってみて慣れることで理屈がわかってくると思います。
素のjavascripyを使ってプログラムを書いている人や何らかの制約でプラグインは使えないという人は試してみてください。
