CSS だけで作るローディング画像 ② |
- 画像や JavaScript を使わずに、CSS だけでシンプルにローディングアニメーションを表示させる方法です。
- HTML ソースと、CSS ソースをページ内に表示しましたので、コピーしてお使いください。
- 色を変えることができます。CSS の「 background-color:」で、ボディカラーなどに合わせて適切な色を設定してください。
- 大きさを変えることもできます。ドットのバランスなどもありますので、CSS の「width:」と「 height:」で工夫してみてください。
- 「.spinner」のサイズを小さくして、縦長の効果を得ることもできます。
・この例では、ドットの 18px に対して、表示幅も同じ 18px に設定しています。