パーツ番号 08-02-08 ・ CSSのみ

デュアルリングスピナー

大小2つのリングが逆方向に回転する目を引くスピナー。WordPressの検索結果や無限スクロールの読み込み中表示におすすめです。

scrollautocss3d

プレビュー

ソースコード

HTML

<div class="d08-02-08-wrap">
          <div class="d08-02-08-outer"></div>
          <div class="d08-02-08-inner"></div>
        </div>

CSS

.d08-02-08{background:#111827}
        .d08-02-08-wrap{
          position:relative;width:72px;height:72px;
          display:flex;align-items:center;justify-content:center;
        }
        .d08-02-08-outer{
          position:absolute;inset:0;border-radius:50%;
          border:4px solid transparent;
          border-top-color:#22d3ee;border-bottom-color:#22d3ee;
          animation:d08-02-08-spin-cw 1.2s linear infinite;
        }
        .d08-02-08-inner{
          width:44px;height:44px;border-radius:50%;
          border:4px solid transparent;
          border-left-color:#f472b6;border-right-color:#f472b6;
          animation:d08-02-08-spin-ccw .9s linear infinite;
        }
        @keyframes d08-02-08-spin-cw{to{transform:rotate(360deg)}}
        @keyframes d08-02-08-spin-ccw{to{transform:rotate(-360deg)}}

クラス名 .d08-02-08 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。