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

テキストシマーローディング

文字自体に光の帯が流れるシマーエフェクトを施したローディング表示。WordPressのダークテーマのページ遷移中の表示や動画サイトの待機画面に。

autocssdark

プレビュー

ソースコード

HTML

<div class="d08-02-12-wrap">
          <p class="d08-02-12-shimmer">LOADING...</p>
          <span class="d08-02-12-sub">コンテンツを準備しています</span>
        </div>

CSS

.prev.d08-02-12{background:#111827}
        .d08-02-12-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
        .d08-02-12-shimmer{
          margin:0;font-size:30px;font-weight:800;letter-spacing:.12em;
          background:linear-gradient(90deg,#374151 0%,#374151 35%,#f9fafb 50%,#374151 65%,#374151 100%);
          background-size:250% 100%;
          -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
          animation:d08-02-12-shine 1.8s linear infinite;
        }
        @keyframes d08-02-12-shine{0%{background-position:200% 0}100%{background-position:-50% 0}}
        .d08-02-12-sub{font-size:11.5px;color:#9ca3af;letter-spacing:.05em}

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