CSSでローディングアニメーションを作るには、過去にも紹介させていただいたCSS Load.netなどを使う方法もありますが、
今回は画像を使わないでCSS3で様々なローディング用アニメーションをつくってみようの記事で紹介されていた方法をもとに、keyframes を使ったシンプルなCSSのローディングアニメーションの作成方法とカスタマイズ例をまとめてみました。
CSS3 でローディングアニメーションを作成
まずはローディングアニメーションのCSS の記述例です。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
#loader { pointer-events:none; text-align:center; position: absolute; width: 30px; height: 30px; border-radius: 50%; border: 8px solid #dd0000; border-right-color: transparent; -webkit-animation: spin 1s infinite linear; -moz-animation: spin 1s infinite linear; -ms-animation: spin 1s infinite linear; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); opacity:1; } 50% { -webkit-transform: rotate(180deg); opacity: 1; } 100% { -webkit-transform: rotate(360deg); opacity:1; } } @-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); opacity: 1; } 50% { -moz-transform: rotate(180deg); opacity: 1; } 100% { -moz-transform: rotate(360deg); opacity:1; } } @-ms-keyframes spin { 0% { -ms-transform: rotate(0deg); opacity: 1; } 50% { -ms-transform: rotate(180deg); opacity: 1; } 100% { -ms-transform: rotate(360deg); opacity:1; } } |
ローディングを表示した場所に、以下の記述を行います。
|
1 |
<span id="loader"></span> |
※当方での確認ブラウザは、Google Chrome、Safari、Firefox、Windows のIE 11です。
ローディングサンプル
上記コードを書いてみると、このようにローディングします。ローダーの大きさ変更
width、height、borderの値を調整することで、ローダーの大きさを変更することができます。
|
1 2 3 |
width: 60px; height: 60px; border: 16px solid #dd0000; |
ローダーの色変更
borderの色を変更すれば、ローダーの色が変わります。
|
1 |
border:16px solid #006699 |
ローダーの回転速度の変更
animationプロパティを調整して、回転速度を変更することも可能です。
|
1 2 3 |
-webkit-animation: spin 3s infinite linear; -moz-animation: spin 3s infinite linear; -ms-animation: spin 3s infinite linear; |
参考ページ
画像を使わないでCSS3で様々なローディング用アニメーションをつくってみよう
コメント