KumaTechLab
2020-12-14/2023-05-23

【Material Design】Circular Progressの使いかた

【Material Design】Circular Progressの使いかた

Material DesignのCicular Progressの使用方法を紹介します。

処理中や通信中などに画面上に表示させることで利用者に処理待ちだということが明示定期に伝わります。

Circular Progressの設定

CSSとJSの設定をみていきます。

@use "@material/circular-progress/mdc-circular-progress";
import { MDCCircularProgress } from '@material/circular-progress';


const circularProgress = new MDCCircularProgress(document.querySelector('.mdc-circular-progress'));

styleはuse文のみでOKでスタイルまで読みこむ必要はありません。

JSでは読み込みとインスタンスを生成しておきます。

次にHTML部です。他のMaterial Design　コンポートよりも使用する項目は少ないのでそのまま記載するだけでOKです。

<div class="mdc-circular-progress mdc-circular-progress--indeterminate" style="width:48px;height:48px;" role="progressbar" aria-label="Example Progress Bar" aria-valuemin="0" aria-valuemax="1">
		  <div class="mdc-circular-progress__determinate-container">
		    <svg class="mdc-circular-progress__determinate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
		      <circle class="mdc-circular-progress__determinate-track" cx="24" cy="24" r="18" stroke-width="4"/>
		      <circle class="mdc-circular-progress__determinate-circle" cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="113.097" stroke-width="4"/>
		    </svg>
		  </div>
		  <div class="mdc-circular-progress__indeterminate-container">
		    <div class="mdc-circular-progress__spinner-layer">
		      <div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left">
		        <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
		          <circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="4"/>
		        </svg>
		      </div>
		      <div class="mdc-circular-progress__gap-patch">
		        <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
		          <circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="3.2"/>
		        </svg>
		      </div>
		    </div>
		  </div>
		</div>

「mdc-circular-progress–indeterminate」を付与することで常に表示されます。

これを外すと表示されなくなります。

デフォルトのカラーはtheme.$primaryです。

大きさは48pxです。

material-design-circular-progress - large

大きさが32pxの場合は以下の形です。

<div class="mdc-circular-progress mdc-circular-progress--indeterminate" style="width:36px;height:36px;" role="progressbar" aria-label="Example Progress Bar" aria-valuemin="0" aria-valuemax="1">
		  <div class="mdc-circular-progress__determinate-container">
		    <svg class="mdc-circular-progress__determinate-circle-graphic" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
		      <circle class="mdc-circular-progress__determinate-track" cx="16" cy="16" r="12.5" stroke-width="3"/>
		      <circle class="mdc-circular-progress__determinate-circle" cx="16" cy="16" r="12.5" stroke-dasharray="78.54" stroke-dashoffset="78.54" stroke-width="3"/>
		    </svg>
		  </div>
		  <div class="mdc-circular-progress__indeterminate-container">
		    <div class="mdc-circular-progress__spinner-layer">
		      <div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left">
		        <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
		          <circle cx="16" cy="16" r="12.5" stroke-dasharray="78.54" stroke-dashoffset="39.27" stroke-width="3"/>
		        </svg>
		      </div>
		      <div class="mdc-circular-progress__gap-patch">
		        <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
		          <circle cx="16" cy="16" r="12.5" stroke-dasharray="78.54" stroke-dashoffset="39.27" stroke-width="2.4"/>
		        </svg>
		      </div>
		    </div>
		  </div>
		</div>
material-design-circular-progress - medium

大きさが24pxの場合は以下のようになります。

<div class="mdc-circular-progress mdc-circular-progress--indeterminate" style="width:24px;height:24px;" role="progressbar" aria-label="Example Progress Bar" aria-valuemin="0" aria-valuemax="1">
		  <div class="mdc-circular-progress__determinate-container">
		    <svg class="mdc-circular-progress__determinate-circle-graphic" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		      <circle class="mdc-circular-progress__determinate-track" cx="12" cy="12" r="8.75" stroke-width="2.5"/>
		      <circle class="mdc-circular-progress__determinate-circle" cx="12" cy="12" r="8.75" stroke-dasharray="54.978" stroke-dashoffset="54.978" stroke-width="2.5"/>
		    </svg>
		  </div>
		  <div class="mdc-circular-progress__indeterminate-container">
		    <div class="mdc-circular-progress__spinner-layer">
		      <div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left">
		        <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		          <circle cx="12" cy="12" r="8.75" stroke-dasharray="54.978" stroke-dashoffset="27.489" stroke-width="2.5"/>
		        </svg>
		      </div>
		      <div class="mdc-circular-progress__gap-patch">
		        <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		          <circle cx="12" cy="12" r="8.75" stroke-dasharray="54.978" stroke-dashoffset="27.489" stroke-width="2"/>
		        </svg>
		      </div>
		    </div>
		  </div>
		</div>
material-design-circular-progress - small

mixinの利用

出来るのは色の変更になります。

以下の例ではsecondaryカラーに変更しています。

まず、SCSSで以下を読み込みます。

@use "@material/circular-progress";
@use "@material/theme";

「.mdc-circular-progress」に対して色を設定します。

.mdc-circular-progress {
	@include circular-progress.track-color( theme.$secondary );
}

このように色が変わります。

material-design-circular-progress - 20201214095454

まとめ

今回は簡単な紹介にしました。

いろいろ情報を見たところサイトに記載されているコードでは期待している動きではなかったためです。

上で記載している記述では期待した動作をしてくれます。

2020 KumaTechLab.