HTMLで簡単に実装できるアニメーションで動くスピナー、カラー・サイズ・スピードのカスタマイズも簡単 -HTML-SpinnerElem
Post on:2024年7月31日
sponsors
HTMLで簡単に実装でき、カスタマイズも可能なアニメーションで動くスピナーを紹介します。アニメーションGIFだと、カスタマイズはほぼ不可能ですが、このスピナーだとさまざまなカスタマイズができます。
外部ファイルとしてJavaScriptを記述し、あとはHTMLで簡単に実装でき、カスタマイズもHTMLで簡単にカラー・サイズ・スピードを変更できる優れものです。
HTML-SpinnerElemの特徴
HTML-SpinnerElemは、スピナーにアニメーション画像を使用していることにうんざりして、画像なしでHTMLでカスタマイズ可能なスピナーを実現するために作成されたものです。
HTMLでカスタマイズが可能なので、カラーやサイズの変更、スピードの変更なども簡単にできます。
- HTMLでカスタマイズが可能なスピナー。
- 依存関係やフレームワークは必要なし。
- 標準的なHTML, CSS, JavaScriptと互換性があります。
- すべてのモダンブラウザで動作します。
- マークアップで、スクリプトで、または組み合わせて制御可能です。
HTML-SpinnerElemのデモ
下記ページ中ほどのデモでは、さまざまなスピナーが実装されています。
HTMLによるカスタマイズだけでもさまざまな種類のスピナーを実装できますが、JavaScriptを組み合わせてインタラクティブなカスタマイズも可能です。
HTML-SpinnerElemの使い方
HTML-SpinnerElemの使い方は、簡単です。
まずは、spinnerComponent.jsを外部ファイルとしてHTMLに記述します。
|
1 |
<script src="spinnerComponent.js"></script> |
あとは、HTMLでスピナーを配置するだけです。
|
1 |
<x-spinner></x-spinner> |
スピナーのデザインやスピードなど、カスタマイズはHTMLでできます。たとえば、グリーンのドットを高速に回転させるスピナーは、下記のように記述します。
|
1 |
<x-spinner rstyle="dotted" sp=".5" color="green"></x-spinner> |
スピナーはすべて基本となるスピナーをベースにしており、スタイルを変更することでSolid, Double, Dottedなどさまざまなデザインのスピナーを使用できます。下記は、ローターの種類と重みによってスピナーがどのように変化するかを示したものです。
Rotor Styles
上記ページでは、スピナーのスタイルなどを変更できます。
sponsors
