💬

【CSS】3点リーダーのローディングっぽいアニメーションを「steps()」を使って実装

2023/11/09に公開

CSS

HTML

tech

概要

Webサイトのローディングなどでしばしば見る、3点リーダーの点が増減するアニメーションについて、今回CSSでの実装を試してみました。

対応方針

Pure CSS Animated Ellipsisのcodepenのページにあるように、steps()で表示する幅を変化させるアニメーションを設定し、実装する方法が挙げられます。
stepsの詳細については、CSSアニメーション、steps( )でコマ送り動画。の記事を参照ください。

実装サンプル

上で紹介したcodepenのサンプルを元に、文字を別のものにして数を変えて実装してみました。
なお、文字について今回は全角文字で試してみましたが、この実装だとひらがなや漢字を使用した際になぜかアニメーション中に全文字が縦並びになってしまうので、ご留意ください。（ひらがなや漢字を使うことは無いと思いますが・・）

<style>
  .loading {
    font-size: 30px;
  }

  .loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    -webkit-animation: ellipsis steps(5, end) 1300ms infinite; /* アニメーションの表示間隔のステップと全体時間 */
    animation: ellipsis steps(5, end) 1300ms infinite;
    content: "★★★★"; /* 全部表示させた時の文字 */
    width: 0px;
    color: red;
  }

  @keyframes ellipsis {
    to {
      width: 5em; /* 全部表示させた時の幅 */
    }
  }

  @-webkit-keyframes ellipsis {
    to {
      width: 5em;
    }
  }
</style>

<span class="loading">Loading</span>

概要

対応方針

実装サンプル

Discussion