ピュアCSSローディングスピナー

画像やJavaScriptを一切使用せず、純粋なCSSのみで構築されたモダンなローディングスピナーです。conic-gradientとmask（または-webkit-mask）を組み合わせることで、滑らかなグラデーションの軌跡を描くスタイリッシュなアニメーションを実現しています。

プレビュー

実装コード

以下のコードをコピーして、プロジェクトのHTMLおよびCSSファイルに貼り付けるだけで、スピナーを導入できます。

<!-- HTML -->
<div class="premium-spinner"></div>

/* CSS */
.premium-spinner {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: conic-gradient(
    from 90deg at 50% 50%,
    rgba(99, 102, 241, 0) 0%,
    rgba(99, 102, 241, 0.2) 20%,
    rgba(99, 102, 241, 1) 100%
  );
  /* 内側を切り抜くためのマスク設定 */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #fff 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #fff 0);
  animation: premium-spin 1s infinite linear;
}

@keyframes premium-spin {
  to {
    transform: rotate(360deg);
  }
}

解説

conic-gradient: 中心点から円周に沿って色が変化するグラデーションを作成します。このスピナーでは、透明（rgba(99, 102, 241, 0)）から完全な色（rgba(99, 102, 241, 1)）へと滑らかに変化させることで、回転する軌跡を表現しています。
mask / -webkit-mask: radial-gradientをマスクとして使用し、要素の中心部分を透過させています。calc(100% - 6px)の部分でスピナーの線の太さ（ここでは6px）を調整できます。
animation: @keyframesでtransform: rotate(360deg)を指定し、linearで一定の速度で無限に回転させ続けます。