純粋なCSSスピナー:原因を含む多くの方法

2024-02-17 08:33 CSSスピナーアニメーション

まず、スピナーの作成にはいくつかの一般的なアプローチがあります。以下に、いくつかの方法とそれぞれのコード例を示します。

  1. CSSアニメーションを使用したスピナー: CSSアニメーションを使用してスピナーを作成する方法があります。以下は、回転する円形のスピナーの例です。

    .spinner {
 width: 40px;
 height: 40px;
 border: 4px solid #f3f3f3;
 border-top: 4px solid #3498db;
 border-radius: 50%;
 animation: spin 2s linear infinite;
}
@keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}

    この例では、.spinnerクラスがスピナー要素のスタイルを定義し、@keyframesルールが回転アニメーションを設定しています。

  2. CSSの::beforeおよび::after疑似要素を使用したスピナー: 他の方法として、CSSの::beforeおよび::after疑似要素を使用してスピナーを作成する方法があります。以下は、縞模様のスピナーの例です。

    .spinner {
 width: 40px;
 height: 40px;
 position: relative;
 margin: 0 auto;
}
.spinner::before,
.spinner::after {
 content: "";
 position: absolute;
 top: 0;
}
.spinner::before {
 left: -15px;
 width: 15px;
 height: 40px;
 background-color: #3498db;
 animation: stretch 1.2s infinite ease-in-out;
}
.spinner::after {
 left: 15px;
 width: 15px;
 height: 40px;
 background-color: #f3f3f3;
 animation: stretch 1.2s infinite ease-in-out;
}
@keyframes stretch {
 0%, 40%, 100% { transform: scaleY(0.4); }
 20% { transform: scaleY(1.0); }
}

    この例では、.spinnerクラスがスピナー要素のスタイルを定義し、::beforeおよび::after疑似要素が縞模様のアニメーションを作成しています。

  3. CSSフレームワークを使用したスピナー: 最後に、CSSフレームワーク（例: Bootstrap、Tailwind CSS）を使用してスピナーを作成する方法もあります。これらのフレームワークには、スピナーを簡単に作成するための便利なクラスやコンポーネントが含まれています。

    例えば、Bootstrapでは以下のクラスを使用してスピナーを作成できます。

    <div class="spinner-border" role="status">
 <span class="visually-hidden">Loading...</span>
</div>

    この例では、.spinner-borderクラスがスピナーのスタイルを適用し、visually-hiddenクラスがスクリーンリーダーに対して非表示のテキストを提供します。

これらはいくつかのスピナーの作成方法の一部です。他にもさまざまなアプローチやライブラリがありますので、自分のプロジェクトの要件に合わせて適切な方法を選択してください。

この記事では、スピナーの作成方法に焦点を当てましたが、実際の実装にはさまざまな要素（例: レスポンシブデザイン、アクセシビリティ、ブラウザの互換性）を考慮する必要があります。また、スピナーのデザインやアニメーションをカスタマイズするためのさらなるリソースやヒントも探求することをおすすめします。

この投稿は、CSSスピナーの作成方法とコード例を提供し、フロントエンド開発者がウェブアプリケーションやサイトでスピナーを実装する際の手助けとなることを目指しています。