これはすごい便利！ HTMLはdiv一つ、あとはCSSをコピペするだけで500種類以上のローダーが簡単に実装できる -CSS Loaders
Post on:2023年9月14日
sponsors
HTMLはdivたった一つ、あとはCSSをコピペするだけで約580種類のローダーを実装できるCSS Loadersを紹介します。
ローダーは、バーやドットのシンプルなアニメーションから他ではあまり見ない面白いものまであり、ローダーを探すときはここをチェックすることをお勧めします。ローダーが不要な人でもCSSアニメーションを楽しめると思います。
まずは、ローダーの実装方法から。
好みのローダーをホバーし「Copy the CSS」をクリックすると、CSSがコピーできます。
CSSをコピー
HTMLはすべて共通で、div一つです。
|
1 |
<div class="loader"></div> |
あとは、さきほどのCSSをペーストするだけ。
※コピーしたCSSにはコメントでHTMLも含まれていました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* HTML: <div class="loader"></div> */ .loader { width: 50px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(farthest-side,#ffa516 94%,#0000) top/8px 8px no-repeat, conic-gradient(#0000 30%,#ffa516); -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0); animation: l13 1s infinite linear; } @keyframes l13{ 100%{transform: rotate(1turn)} } |
上記のコードで実装したローダーです。
サイズやカラーは、CSSで簡単に変更できます。
CSS Loadersには500種類以上のローダーがあり、カテゴリごとに分類されています。ちなみに、1,000種類が目標だそうです。
まずは、シンプルなアニメーションのローダー。
Classic, Dots, Bars, Dots vs Bars, Spinner, Shapes, Progress
Flippingはフリップ、くるっと回転するアニメーションです。
Pulsingは脈動のように動くアニメーション、バットマンのシンボルもあります。
Arcadeにはインベーダーやパックマンなど、懐かしいアーケードゲームのアニメーション。
Hungryはジュースを飲んだり、アイスやお菓子を食べるアニメーション。
Clonesは同じ形のものがクローンとして、異なるカラーでアニメーションします。
Blobはねばねばした、ぶよぶよした形のアニメーション。
Factoryは工場で何かを製造しているかのようなアニメーション。
これらの複雑なローダーのアニメーションもdiv一つで実装されています。
sponsors
