How TO - CSS ローダー

CSS を使用して preloader の作成方法を学習します。

ローダーの作成方法

ステップ 1) HTML の追加：

例

ステップ 2) CSS の追加：

例

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

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

Try it Yourself »

例の説明

border プロパティは、ローダーのボーダーのサイズと色を指定します。 border-radius プロパティは、ローダーを円に変換します。

ボーダー内で回転する青いものは、border-top プロパティで指定します。他の "spinners" が必要な場合は、border-bottom、border-left および/または border-right をインクルードすることもできます（下記の例を参照）。

ローダのサイズは、width と height プロパティで指定します。

最後に、青い部分を2秒のアニメーションスピードで永遠に回転させるアニメーションを追加します。

注: animation と transform プロパティをサポートしていないブラウザには、-webkit-と -ms- の接頭辞も含める必要があります。例をクリックすると、その方法が表示されます。You should also include -webkit- and -ms- prefixes for browsers that do not support animation and transform properties. Click on the example to see how.

その他のスピナーの追加

例

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

Try it Yourself »

例

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

Try it Yourself »

例

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

Try it Yourself »

その他の例

ローダをページの中央に配置し、ロードが完了したときに「ページコンテンツ」を表示する方法の例：

例

Try it Yourself »

❮ 前章へ次章へ ❯