はじめに
以前に作成したアニメーション付きWeb Component、progress-ring-componentの使い方についての説明です。
どんなコンポーネントなのか
progress-ring-componentはStencilでビルドされたアニメーション付きのリング状のWeb Component。指定されたパーセント値に達するまでスムーズに形状が変化します。また色や大きさ、太さなど自由にカスタマイズする事ができ、ダッシュボード等のUIに便利かと思います。内部でeasing-animation-framesという軽量のアニメーションライブラリを使用していて、コンポーネント自体も軽量です。
CDNのjsファイルを<head>に読み込ませ、あとはhtmlファイル内で<progress-ring-component>タグを記述するだけOKです。React等のプロジェクト内でも使用可能です（後に説明）。
使用例 1
まずはシンプルな使用例です。
<progress-ring percentage="30"></progress-ring>
<progress-ring percentage="60" round-linecap="true"></progress-ring>
<progress-ring percentage="90" disable-digits="true">
<p class="completed-count">9/10<br />Complete</p>
</progress-ring>
使用例 2
次にクリックイベントを含んだ例です。
<progress-ring percentage="10"></progress-ring>
<div class="buttons">
<button id="buttonOne">30%</button>
<button id="buttonTwo">60%</button>
<button id="buttonThree">90%</button>
</div>
<script>
const ring = document.querySelector("progress-ring");
const buttonOne = document.querySelector("#buttonOne");
const buttonTwo = document.querySelector("#buttonTwo");
const buttonThree = document.querySelector("#buttonThree");
buttonOne.addEventListener("click", () => {
ring.setAttribute("percentage", 30);
});
buttonTwo.addEventListener("click", () => {
ring.setAttribute("percentage", 60);
});
buttonThree.addEventListener("click", () => {
ring.setAttribute("percentage", 90);
});
</script>
使用例 3
アニメーション終了後にコールバック関数を呼び出すなども可能です（実装はデモのソースコードを見て頂ければと）。
プロパティの説明
必須のプロパティはpercentageのみで、その他は値を指定しない場合はデフォルト値が使用されます。
| プロパティ名 | 説明 |
|---|---|
| percentage | パーセント値（必須） |
| radius | リングの半径（デフォルトは80） |
| stroke-width | リングの太さ（デフォルトは10） |
| round-linecap | ラインキャップ（線端）を丸くするか（デフォルトはfalse） |
| duration | アニメーションのms時間（デフォルトは4000） |
| easing-type | アニメーションのイージング（デフォルトはquartInOut） |
| int-size | 整数値のフォントサイズ（デフォルトは30） |
| decimal-size | 小数点以下のフォントサイズ（デフォルトはintSize * 0.7） |
| disable-digits | パーセント値を非表示にする（デフォルトはfalse） |
| disable-decimals | 小数点以下を非表示にする（デフォルトはfalse） |
| colors | パーセント値とリングの色（デフォルトは'[[0,"#ff4f40"],[25, "#ffcd40"],[50, "#66a0ff"],[75, "#30bf7a"]]'） |
| invert-colors | 逆パターンの色を使用するか（デフォルトはfalse） |
| event-id | コールバック関数で使用するイベントID（デフォルトはundefined） |
セットアップ方法
htmlファイルの<head> タグ内に <script type="module" src="https://unpkg.com/progress-ring-component/dist/progressring/progressring.esm.js"></script>を指定。
<!DOCTYPE html>
<html>
<head>
<script
type="module"
src="https://unpkg.com/progress-ring-component@1.0.36/dist/progressring/progressring.esm.js"
></script>
</head>
<body>
<progress-ring percentage="50"></progress-ring>
</body>
</html>
Typescriptを使用している場合は型定義の追加が必要な場合があります。以下、Reactコンポーネントの例です。
// App.tsx
import { JSX as LocalJSX } from "progress-ring-component/loader";
import { HTMLAttributes } from "react";
type StencilToReact<T> = {
[P in keyof T]?: T[P] &
Omit<HTMLAttributes<Element>, "className"> & {
class?: string;
};
};
declare global {
export namespace JSX {
interface IntrinsicElements
extends StencilToReact<LocalJSX.IntrinsicElements> {}
}
}
function App() {
return (
<div>
<progress-ring percentage={30}></progress-ring>
</div>
);
}
export default App;
まとめ
シンプルで使いやすいコンポーネントだと思います。もし使用されることがあればフィードバックを頂けると幸いです。