web-dev-qa-db-ja.com

透明なajaxスピナーはどこにありますか？

私はどんな背景にもよく見えるまともな透明なajaxスピナーを見つけようとしています。私はajaxload.infoやその他のさまざまなジェネレーターのサイトに行きましたが、暗い背景では見栄えがよくありません。誰もが透明なスピナーをどこで手に入れることができるか知っていますか？

ajaxspinner
25
espradley

これは、見栄えをよくするにはアルファ透明度（つまり、ピクセルごとの部分的な透明度）が必要なためです。GIF形式（ブラウザでサポートされる唯一の一般的なアニメーション画像形式）は、バイナリ透明度のみをサポートします（各ピクセルは100 ％不透明または透明）。

私がGIFのために思いついた唯一の解決策は、背景色に基づいてその場でローダーを生成することです—それでも、非単色では機能しません。

最善の解決策は、アルファ透明度を必要としないアニメーションを使用するか（Facebookの3つのブロックがこの良い例です）、または実際に移動してアニメーション化するため、CSS3/Javascript/Canvasベースの豪華なスピナーの1つを試してみることです（つまり、回転）1つのフレーム、アルファ透明度を持つPNGにすることができます。

16
Davey Shafik

最近、アルファチャネル透過性をサポートするPNGスプライトに切り替えました。

example PNG Sprite （ http://preloaders.net/ を使用して生成）

背景画像のオフセットを変更する小さなJavaScriptループが必要ですが、特に（POST）フォームをサーバーに送信する場合（通常のGIFのアニメーションは多くの場合その場合停止します）、それらは非常に便利であることがわかりました。また、レガシーブラウザは、カスタム要素を回転または描画するよりもサポートします。

    var counter = 0;
    setInterval(function() {
        var frames=12; var frameWidth = 15;
        var offset=counter * -frameWidth;
        document.getElementById("spinner").style.backgroundPosition=offset + "px 0px";
        counter++; if (counter>=frames) counter =0;
    }, 100);

例： http://jsfiddle.net/Ekus/dhRxG/

21
Ekus

http://spiffygif.com を使用してみてください

docs で説明されているハロー機能は、この問題の回避策を提供します

9
Sean

一方、CSSアニメーションのサポートがますます利用可能になったので、CSSのみの読み込みインジケーターの印象的なセットを以下に示します。 http://tobiasahlin.com/spinkit/

7
Steven De Groote

フォントを使用します。

コードは次のようになり、CSSを使用してフォントの1文字を回転させます。

<i class="icon-spin3 animate-spin"></i>

「アイコン」フォントを取得するには、 Fontello を確認してください。たとえば、フォント「Fontelico」で提供されるいくつかの優れた「スピン可能な」文字は次のとおりです。

font spinners

フォントを使用すると、サイズ、色、透明度を非常に簡単に設定できます（CSSのみです）。また、ベクターグラフィックとしてレンダリングされるため、サイズに関係なく常にきれいなエッジが得られます。けっこういい。

ps-Fontelloのすばらしい点の1つは、必要な文字をハンドピックできることです。その後、フォントファイルと必要なcssを取り除いたZipファイルをダウンロードします。 animate-spinクラスを利用するには、animation.cssファイルをインクルード/使用してください。

5
broc.seib