Zenn
🔰

CSSを理解する（Loader編1）

2024/04/15に公開
CSS
React
初心者
Remix
loader
tech

内容

cssでの作成物とそのコードを載せて、各プロパティの挙動を理解しようという内容です。
Loader編1としてますが、2以降があるのかどうかは気分次第です...

きっかけ

Reactなどでたまーにべた書きでcssを書くことがあるけど、挙動を理解しないままコピペしていることが多かったのでちょっと深掘りして理解しようと思ったのがきっかけです。

Loader1

作成物

コード

#loader1 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 8px solid;
  border-color: #e4e4ed;
  border-right-color: #766df4;
  animation: s2 1s infinite linear;
}
@keyframes s2 {
  to {
    transform: rotate(1turn);
  }
}

プロパティの説明

border-radius

  • 要素の境界の外側の角を丸める
  • 50%：円になる
    ここの時点ではこんな感じ（便宜上background-color: black;を入れてます）

border

  • 要素の境界を設定する
  • 8px：境界線の太さ
  • solid：塗りつぶし

⇒ 境界線を太くした円を書く

border-color

  • 境界の色

border-right-color

  • 要素の右側(円の場合は45度~135度)の境界線の色を指定

⇒ 右側の要素のみが際立つように円の境界線および境界線の右側に色をつける
この時点ではこんな感じ

だいぶそれっぽくなってきました。あとはぐるぐる回すだけです。
animation

  • スタイルのアニメーションを指定
  • s2：以下で指定する@keyframesの名前
  • 1s：アニメーションの時間
  • infinite：反復回数 → 無限に反復する
  • linear：タイミング関数 → 一定速度で進行

@keyframs s2

  • to：アニメーションの終わり（100%を示す）
    • from：アニメーションの始まり（0%）を示す
  • transform
    • 要素の変形
    • rotate(1turn)：要素を1回転させる

⇒ 円全体を1回転させることで境界線の右側の色がくるくる回っているように表現

Loader2

作成物

コード

.loader2 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 8px solid;
  border-color: #b0d6f5;
  border-right-color: #0463ca;
  border-left-color: #0463ca;
  animation: s2 1s infinite linear;
}

loader1にborder-left-colorをつけると左右の濃い青色がぐるぐる回すことができます。

Loader3

作成物

コード

.loader3 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: conic-gradient(#0000 10%, #0463ca);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
  animation: s2 1s infinite linear;
}@keyframes s2 {
  to {
    transform: rotate(1turn);
  }
}

プロパティの説明

background

  • 背景のスタイルを設定
  • conic-gradient：中心点をまわりを回りながら色が変化していく
  • #0000 10, #0463ca
    • #0000（透明な黒）で, 円の10%部分から開始
    • #0463caの色が円の中心から扇状に広がる

⇒ 中心点を回りながら扇状に透明な黒から#0463caの色に変化していく

透明であることが重要（色は便宜上#000：　黒としているだけ）
この時点ではこんな感じ

-webkit-mask

ちなみにconic-gradientは放射線上のグラデーションを指定する

  • farthest-side：中心から最も遠い辺を終端とする
  • #0000 calc(100% - 8px), #000 0
    • グラデーションの色と位置を指定
    • 中心から端まで#0000（透明な黒）から#000 不透明な黒
    • calc(100% - 8px)：円の端から8pxまでを算出

⇒ 円の端から8px以外をマスク（透明にする）

透明か透明じゃないかが重要（色#000の部分はなんでもいい）

Loader4

作成物

コード

.loader4 {
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background: radial-gradient(farthest-side, #0463ca, 94%, #0000) top/8px 8px
      no-repeat,
    conic-gradient(#0000 10%, #0463ca);
  mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
  animation: s2 1s infinite linear;
}
@keyframes s2 {
  to {
    transform: rotate(1turn);
  }
}

radial-gradient

  • 扇状のグラデーションを指定
  • farthest-side：中心から最も遠い辺を終端(100%の部分)とする
  • #0463ca, 94%, #0000：94%の位置で#0463caから透明（#0000）への変化が終わる

この時点ではこんな感じ

  • top / 8px 8px
    • top：背景の要素の上部に配置
    • 8px 8px：背景の幅, 高さを指定

これを入れるとこんな感じ

初期値がrepeatなので背景が埋まるように無限に生成される

  • no-repeat：背景画像の繰り返しを無効にする
    無限生成を上記で指定したもの（top / 8px 8px）のみ表示させる

ここにloader3と同じconic-gradientを適用

最後にloader3と同じマスクをかけると完成

今回はここまでにします。

Discussion