CSSを使用してスピナーローダを作成する

ハイフォークス
この記事では、純粋なCSSを使用してスピナーローダを作成する方法について説明します.
次のようにローダを作成します.

スピナーというファイルを作り始めましょう.プロジェクトのJSは、ローダのためにいくつかのJSXを追加します.

スピナー.js

const Spinner = () => <div className="loader"></div>;

export default Spinner;

上のコードを理解しましょう
ここでは、スピナーと呼ばれる機能コンポーネントを作成しました.クラスでdiv要素を返すloader . それはそれに必要なすべてのJSXです.
さて、CSSを追加しましょう.

.loader {
  border: 10px solid #f3f3f3;
  border-top: 10px solid #3498db;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 1s linear infinite;
}

上記のCSSを理解しましょう
追加しましたborder:10px solid #f3f3f3 プロパティを作成します.border-top: 10px solid #3498db 灰色の色の円の上に青い色のアークを作成します.その後border-radius: 50% プロパティは、それを円形にし、高さと幅の同じ量を与えている.
今、我々は追加したスピン効果を追加するにはanimation: spin 1s linear infinite .
次のようになります.

最後のCSSを加えて紡績効果を作りましょう

 @keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 

最後のCSSを理解しましょう
ここでは、我々はスピンアニメーションのキーフレームを追加しました.ここで使用する要素を回転させますtransform: rotate() 0度から360度までのプロパティ.
最後に、我々のSinnerローダーは準備ができています.
それがこの記事でした.あなたのコメントと記事についてのフィードバックを共有します.
以下のコードを見つけてください.
学習を続ける!