ブログデザイン備忘録～ Loaders - つれづれなる備忘録

サイト等の遷移中の表示をHTMLとCSSだけの実装例が以下のサイト"Loaders"で紹介されている。

HTML/CSSの実装では、コードをコピーして利用することができる。24例のデザインがあるが、この中からいくつかCode Penで実装してみた。基本的にはHTMLでオブジェクトを定義して、CSSで図形のサイズ、色とkeyframeを用いてアニメーションを指定する。

ringは一部欠けた輪が回転している、Windowsなどでもおなじみの処理中を示す表示。以下のようにhtmlでまず円を描画する。クラスbaseは表示を中央寄せするために付け加えた。

<div class=base>
<svg
  class="ring"
  viewBox="25 25 50 50"
  stroke-width="5"
>
  <circle cx="50" cy="50" r="20" />
</svg>
</div>

CSSは以下のように(アニメーション設定のkeyframeは省略)なっている。基本的にはuib-sizeで大きさ、uib-speedでアニメーションの速度、uib-colorで色をカスタマイズする。ほかの部分はレイアウトが崩れるため、いろいろ調整が必要になりデザインを利用するという点では手間がかかる。 Loaderのデフォルト： --uib-size: 40px;--uib-speed: 2s; --uib-color: black;から変更した。

.base{
  text-align:center;
}
.ring {
  --uib-size: 50px;
  --uib-speed: 3s;
  --uib-color: #4e54c8;
  height: var(--uib-size);
  width: var(--uib-size);
  vertical-align: middle;
  transform-origin: center;
  animation: rotate var(--uib-speed) linear infinite;
}

.ring circle {
  fill: none;
  stroke: var(--uib-color);
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: stretch calc(var(--uib-speed) * 0.75) ease-in-out infinite;
}

同様にWaveform, Dotpulse, NewtonsCradleのデフォルトを変更して実装したCode Penを以下に示す。

See the Pen loader by ATATAT (@atatat) on CodePen.