WordPressのブロックエディタ拡張:Getwidについて解説(22)Circular Progress Bar

タナビーの高梨です。

今回はGetwidのCircular Progress Barブロックに関する設定を解説していきます。

全般設定については こちらをご覧ください。

Circular Progress Bar概要

Circular Progress Barブロックとは公式ページの引用では、

バーのサイズや色を調整することができるアニメーションの円形プログレスバー

公式ページ(翻訳 by DeepL先生)

だそうです。

円形のプログレスバー、こんなやつですね。

どういった設定があるのでしょうか。

さっそく、見ていきましょう!

Circular Progress Bar設定

Settings

Progress:進捗%の値を数値で設定します。デフォルトは75%になっています。

Size:円の大きさをpxで設定します。デフォルトは200pxです。

Thickness:進捗の太さをpxで設定します。デフォルト値は空欄になっていてよく分かりませんが、10pxくらいです。Min1pxからMaxはThicknessで設定した値の半分となっています。Maxに設定すると、見かけ上円グラフみたいになります。

こんな感じ。

Value:真ん中に表示される文字列を設定します。デフォルトは空白で、その場合は〇〇%になります。

Animate:オンにすると、進捗がゼロからツレーっと伸びていきます。オフにすると、ドン!と表示です。

Background Color:進捗していない部分の色を設定します。パレットから、または、カスタムカラーでカラーピッカーか直接RGB数値入力で設定します。

Bar Color:進捗部分の色を設定します。パレットから、または、カスタムカラーでカラーピッカーか直接RGB数値入力で設定します。

まとめ

設定個所は以上です。

これも普通のプログレスバーと同様で、数値固定のプログレスバーというのは、何にどういった使い方をするのでしょうか。

実際のところ、使いどころがよく分かりません。