純粋なhtml + cssで、完全にgifなしでajaxリクエストの実行のアニメーションをどうにかしたかったのです。 また、Mootools用のプラグインを作成しました。これにより、単一のJavascriptファイルを追加するときに、さまざまなサイズ、背景、タイプのアニメーションアイコンを取得できます。
長所：
- 肺。 単一の要素の重さはgifにすぎないため、サイト/アプリケーションのさまざまなフラグメントに繰り返しスタイリングできます。
- 接続が簡単（下の例を参照）
- クロスブラウザ。 非常に優れているがCSS3に似た要素とは異なり、これらはIE 7 +、Firefos 3 +、Opera 11、Safari、Chrome、Mobile Safari 4+およびAndroid 2.2でテストされました。 IE6、Opera 10、SafariおよびChromeの古いバージョンで動作する可能性が高いですが、テストされていません。
- すべてのアニメーションWebサイトアイコン用の1つのファイルであり、状況ごとに個別のgifではありません。
- 基本クラスは、独自のアニメーションを追加することで拡張できます。
- これはテクノロジーに直接関連するものではありませんが、めったに見られないため、追加します-一部のアニメーションには、
POSTおよびGETリクエストをそれぞれ視覚化するのに便利なinおよびoutモードがあります。 - 何らかの理由で、子供の頃からアニメーションGIFは好きではありません
そして、短所：
- IE 9では、要素は正方形のままです。 境界半径がサポートされていますが、塗りつぶしに関連するバグ（または機能）があり、すぐにバイパスできませんでした。 誰かがこれを行う方法を教えてもらえますか。
- 理論的には、負荷がかかっている古いブラウザの弱いマシンでは速度が低下する可能性があります。 これはテストには現れませんでしたが、ご存知のとおり、人生はテストとは異なります。 IE 7モードのIE 8の脆弱なネットブックと仮想マシンでテストされました。テストに弱いものは見つかりませんでした。
- 確かにまだ入力されたコメントで...
そして、他のすべては、彼らが言うように、一度見た方が良いです。
デモはこちら：
http :
//lavmax.github.com/MUX.Loadersソースとドキュメントはこちら：
https :
//github.com/lavmax/MUX.Loaders使用例：//
var loader = new MUX.Loader.Bar();
loader.start(); //
loader.stop(); //
// start() stop() html-
$('my-loaders-id').start();
$('my-loaders-id').stop();
// html- $
$(loader).inject(document.body);
// ,
loader.elem.inject(document.body);誰が気に入ったのか、使ったのか、気に入らなかったのか、建設的に落書きしてください。