これならコピペで簡単! HTMLはシンプル、CSSで実装された超軽量のおしゃれなローディング・スピナー -UI Ball

コピペで簡単に使用できる、HTMLとCSS(複雑なものはSVG)で実装されたWebサイトやスマホアプリ用のローディングアニメーションを紹介します。

さまざまなローディングやスピナーが揃っていますが、画像は一切使用されていません。必要な時にさくっと実装できるので、スニペットに登録しておくと便利です。
下記は静止画ですが、もちろん全部アニメーションで動きます。

HTMLとSVGとCSSで実装されたWebサイトやスマホアプリ用の超軽量ローダー -UI Ball

Loaders -UI Ball
Loaders -GitHub

ほかにもCSSで実装されたローディングをチェックしたい人は、下記もどうぞ。

UI Ballのローディングはすべて1Kb未満の超軽量で、依存関係はゼロなので、HTMLとCSSをコピペするだけで簡単に使用できます。カラー・サイズ・アニメーションの速度などはCSSで簡単にカスタマイズできます。
MITライセンスで、商用プロジェクトでも無料です。

サイトのキャプチャ

Loaders -UI Ball

Reactプロジェクトで利用できるようにpackage managerが用意されていますが、HTMLとCSSをコピペするだけでも利用できます。

ということで、ローディングをいくつかコピペで実装してみました。
まずはニュートンのゆりかごのローディング。

カスタマイズは簡単、カラーと速度を変更してみました。

コピペしたHTMLとCSSは、下記の通りです。
カラー・サイズ・アニメーションの速度などは、CSSで簡単に変更できます。

実装コードは、各ローディングの「Source」をクリックすると表示されます。

サイトのキャプチャ

Loaders -UI Ball

他にも気になったローディングをコピペしてみました。

sponsors

top of page

©2022 coliss