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

タナビーの高梨です。

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

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

Progress Bar概要

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

シンプルなアニメーションの横型プログレスバー

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

だそうです。

シンプルなプログレスバーということですが、どういった設定があるのでしょうか。

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

ブロックの設定

Settings

Value:プログレスバーの進捗値を%で設定します。

Animate:チェックを入れると表示されたときに0%の状態からValueで指定した%まで横棒がビヨヨヨーンと伸びます。逆にチェックが入っていないと最初から指定した%の横棒が表示されているだけになって、あまりプログレスバーとして面白くありません。

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

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

なお、プログレスバーの表題は、ブロックに直接入力します。

表示イメージはこんな感じです。(75%、アニメーションあり、Progress Colorオレンジ、Background Color 赤)

Progress Barサンプル

75%

まとめ

設定個所は以上です。

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

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