方法-CSSローダー
CSSを使用してプリローダーを作成する方法を学びます。
ローダーを作成する方法
ステップ1)HTMLを追加します。
例
<div class="loader"></div>
ステップ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); }
}
例の説明
このborder
プロパティは、ローダーの境界線のサイズと境界線の色を指定します。このborder-radius
プロパティは、ローダーを円に変換します。
境界線の内側で回転する青いものは、
border-top
プロパティで指定されます。border-bottom
、border-left
および/または
より多くの「スピナー」が必要な場合は、を含めることもできborder-right
ます(以下の例を参照)。
ローダーのサイズは、width
およびheight
プロパティで指定されます。
最後にanimation
、2秒のアニメーション速度で青いものを永遠に回転させるを追加します。
注:アニメーションおよび変換プロパティをサポートしないブラウザーには、-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;
}
もう一つの例
ローダーをページの中央に配置し、ロードが完了したときに「ページコンテンツ」を表示する方法の例: