少し前にcodepenで公開された回転型CSSプリローダーのジェネレータです。
右側のコントロール部で背景の明暗をトグルで決め、回転するスピナー全体ののサイズ、回転するラインの色、その色のアルファ値、ラインのサイズ、背景リングの色、アルファ値、サイズを決めます。設定は動いているサンプルにすぐに反映するので、それを見ながら調整し、決まったら左側のソース部をマウスオーバーして表示し、ソースをコピーします。htmlなどにソースをペーストすれば回転型CSSプリローダーとして利用できます。
【追記】Safariなどではコントロール部が左に寄ってしまうことがあるようです。機能に問題はなく、スピナー全体ののサイズを大きくすれば、その分コントロール部は右に移動します。

サンプル実際に設置した回転型CSSプリローダー

 

 

戻るボタン

 

 

inserted by FC2 system