どのように作成するか：CSSローダー

CSSでプレロードエフェクトを作成する方法を学びます。

自分で試してみる

ローダーを作成する方法

ステップ1 - HTMLを追加：

<div class="loader"></div>

ステップ2 - CSSを追加：

.loader {
  border: 16px solid #f3f3f3; /* 淡色 */
  border-top: 16px solid #3498db; /* 青色 */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

自分で試してみる

例説明：

border 属性でローダーの境界線の大きさと色を指定します。border 属性でローダーを円形に変換します。

border-radius 境界線内で回転する青い部分は以下の属性で指定されます。 border-top 属性で指定されます。さらに「スピナー」が必要な場合は以下も含めてください。border-bottom、 border-left および/またはborder-right

ローダーのサイズは以下の例を参照してください。 width および height 属性で指定されます。

最後に、青い部分が2秒で永遠に回転するアニメーションを追加しました。

注意：サポートしていない animation および transform 属性を持つブラウザのために、以下を含める必要があります。 -webkit- プレビューをクリックして操作方法を確認してください。

追加のスピナー

例

.loader {
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
}

自分で試してみる

例

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
}

自分で試してみる

例

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
}

自分で試してみる

もう一つの例

「ページ内容」を表示するためにページ中央にロードエフェクトを配置し、ロードが完了したらどうしますか：

例

自分で試してみる