Circle counterエレメントの追加.

DXPR Builderを学ぶページを作るコンテンツを追加データとモーション

1つの重要な数値（割合やスコアなど）を示すため、塗りつぶされていくアニメーションのリングを設置できます。ランディングページや会社紹介ページで統計を目立たせるのに使います。

78%まで塗りつぶされた紫のプログレスアーク、チャートアイコン、Renewal rateラベルのあるサークルカウンター

サークルカウンターの追加

ログインした状態でページを開きます。コンテンツエリアにカーソルを合わせると、ビルダーのコントロールが表示されます。基本操作は最初のページをご覧ください。

カラムにカーソルを合わせ、コントロールバーの+をクリックします。空のページではAdd Elementsをクリックします。Contentタブを開き、Circle counterをクリックします。カラムの一番上に追加され、設定ダイアログが開きます。
塗りつぶし量の設定はPercentのスライダーで行います。横のボックスへの直接入力もできます。ここでは78を設定します。
アークの色はForeground colorで選びます。
Circle contentセクションを開き、指標のTextラベルを入力します。
下のIconフィールドで、Searchボックスにchartと入力し、グリッドからアイコンをクリックします。
ダイアログのSaveをクリックします。次に、コンテンツエリア上部のツールバーにあるSaveをクリックして、ページを保存します。

リングが設定した割合まで塗りつぶされ、中央にアイコンとラベルが表示されます。動画では紫色で78パーセントまで塗りつぶされ、Renewal rateと表示されています。リングは画面内に入るとアニメーションします。ページを保存して公開すると、訪問者に表示されます。

エレメントにカーソルを合わせ、コントロールバーのMore > Settingsを開きます。設定項目は次のとおりです。

Percent: リングの塗りつぶし量。0から100で指定します。
Dimension: 円のサイズ（ピクセル）。100から500で指定します。
Foreground color: 塗りつぶされたアークの色。
Background color: 空のトラックの色。
Fill color: 円の内側の色。
Foreground width: アークの太さ。
Animation: アークをゼロから塗りつぶします。Animation durationとAnimation delayでタイミングをミリ秒で設定します。
Animation in-viewport: 円が画面内に入るまでアニメーションを待ちます。

各スライダーの横には、正確な値を入力できる数値ボックスがあります。Circle contentセクションでは、中央の表示内容を設定します。

Show progress: 独自のテキストやアイコンの代わりに、割合の数値を表示します。初期値はオフです。
Text: 短いラベル。Font sizeとText colorでスタイルを設定します。
Info: テキストの下に付く小さめの2行目。
Icon: テキストの前のアイコン。Search横のドロップダウンで、グリッドを1つのアイコンセットに絞れます。Icon sizeとIcon colorでスタイルを設定します。

ContentタブにCircle counterがない。 ユーザープロファイルで非表示になっています。管理者にUser Profilesでの有効化を依頼してください。
再読み込み後に消えている。 ページが保存されていません。追加し直し、コンテンツエリア上部のツールバーにあるSaveをクリックします。
リングが薄い、または見えない。 Foreground colorとBackground colorがページの色に近すぎます。エレメントにカーソルを合わせ、コントロールバーのMore > Settingsを開き、コントラストの強い色を選びます。
リングがアニメーションしない。 Animationがオフか、画面内に入るまで待機しています。Animationをオンにして、円が画面内に入るまでスクロールします。
テキストとアイコンが出ない。 Show progressがオンのため、割合が表示されています。Circle contentにあるShow progressをオフにします。

Styleタブでサークルカウンターの間隔や背景を変更します。