プログレスリング (スピナー) のアニメーション画像の作成について紹介します。

概要

Webページなどでプログレスリングを表示する場合にアニメーション画像の調達で苦労することがあります。
この記事ではプログレスリングを作成するサービス、作成されたプログレスリングを入手できるサービスを紹介します。

サービス:Preloaders.net

URL:https://icons8.com/preloaders/

基本のプログレスリングアニメーションに対してカラーや速度を設定して好みのプログレスリングのアニメーションを作成できます。作成したファイルはアニメーションGIFなどの形式でダウンロードできます。Photoshop形式(*.ps)でダウンロードする場合は有料プランの契約が必要になります。

サービス : LoaderGenerator

URL:http://loadergenerator.com/

シンプルなプログレスリングを作成するサービスです。アニメーションの速度や大きさを設定できます。作成されたアニメーションはアニメーションGIF形式でダウンロードできます。

サービス : loading.io

URL:https://loading.io/

基本のプログレスリングアニメーションに対してカラーや速度を設定して好みのプログレスリングが作成できるサービスです。
Pure CSS Loader のページにはCSSだけで表現できるプログレスリングのサンプルもあります。

CSSコード : Loaders.css

URL:https://connoratherton.com/loaders
CSSで表現されたアニメーションのコードがあります。

CSSコード : Single Element CSS Spinners

URL:https://projects.lukehaas.me/css-loaders/
CSSで表現されたアニメーションのコードがあります。

CSSコード : SpinKit

URL:https://tobiasahlin.com/spinkit/
CSSで表現されたアニメーションのコードがあります。

CSSコード : md-preloader

URL:https://github.com/rtheunissen/md-preloader
CSSで表現されたアニメーションのコードがあります。こちらについてはコード等の詳細をこちらの記事で紹介しています。