これならコピペで簡単！ HTMLはシンプル、CSSで実装された超軽量のおしゃれなローディング・スピナー -UI Ball
Post on:2022年4月27日
sponsors
コピペで簡単に使用できる、HTMLとCSS（複雑なものはSVG）で実装されたWebサイトやスマホアプリ用のローディングアニメーションを紹介します。
さまざまなローディングやスピナーが揃っていますが、画像は一切使用されていません。必要な時にさくっと実装できるので、スニペットに登録しておくと便利です。
下記は静止画ですが、もちろん全部アニメーションで動きます。
Loaders -UI Ball
Loaders -GitHub
ほかにもCSSで実装されたローディングをチェックしたい人は、下記もどうぞ。
UI Ballのローディングはすべて1Kb未満の超軽量で、依存関係はゼロなので、HTMLとCSSをコピペするだけで簡単に使用できます。カラー・サイズ・アニメーションの速度などはCSSで簡単にカスタマイズできます。
MITライセンスで、商用プロジェクトでも無料です。
Reactプロジェクトで利用できるようにpackage managerが用意されていますが、HTMLとCSSをコピペするだけでも利用できます。
ということで、ローディングをいくつかコピペで実装してみました。
まずはニュートンのゆりかごのローディング。
カスタマイズは簡単、カラーと速度を変更してみました。
コピペしたHTMLとCSSは、下記の通りです。
カラー・サイズ・アニメーションの速度などは、CSSで簡単に変更できます。
|
1 2 3 4 5 6 |
<div class="newtons-cradle"> <div class="newtons-cradle__dot"></div> <div class="newtons-cradle__dot"></div> <div class="newtons-cradle__dot"></div> <div class="newtons-cradle__dot"></div> </div> |
|
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
.newtons-cradle { --uib-size: 40px; --uib-speed: 1.4s; --uib-color: black; position: relative; display: flex; align-items: center; justify-content: center; width: var(--uib-size); height: var(--uib-size); } .newtons-cradle__dot { position: relative; display: flex; align-items: center; height: 100%; width: 25%; transform-origin: center top; } .newtons-cradle__dot::after { content: ''; display: block; width: 100%; height: 25%; border-radius: 50%; background-color: var(--uib-color); } .newtons-cradle__dot:first-child { animation: swing var(--uib-speed) linear infinite; } .newtons-cradle__dot:last-child { animation: swing2 var(--uib-speed) linear infinite; } @keyframes swing { 0% { transform: rotate(0deg); animation-timing-function: ease-out; } 25% { transform: rotate(70deg); animation-timing-function: ease-in; } 50% { transform: rotate(0deg); animation-timing-function: linear; } } @keyframes swing2 { 0% { transform: rotate(0deg); animation-timing-function: linear; } 50% { transform: rotate(0deg); animation-timing-function: ease-out; } 75% { transform: rotate(-70deg); animation-timing-function: ease-in; } } |
実装コードは、各ローディングの「Source」をクリックすると表示されます。
他にも気になったローディングをコピペしてみました。
sponsors
