かっこいいデザインのローディング用アニメーションのCanvas版、アニメーションGIF版、CSSスプライトPNG版を同時に作成できるオンラインサービスを紹介します。 Sonic Creatorの前に、まずはSonicのデモから。 Sonic Sonicは、HTML5 Canvasを使ってローディング用のアニメーションを作成する超軽量（約3K）のスクリプトで、実装方法などは下記をご覧ください。 かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic 今回紹介するのは、このSonicをコードベースでオンラインで簡単に設計でき、それをアニメーションGIFやCSSスプライト用のPNG画像を生成するオンラインツールです。
Share it! If checked, the option values will be stored in the URL so that you can easily share your settings. Features No images No dependencies Highly configurable Resolution independent Uses CSS keyframe animations Works in all major browsers Includes TypeScript definitions Distributed as a native ECMAScript module MIT License Spin.js dynamically creates spinning activity indicators that can be
jQueryを使った非同期通信（Ajax）処理中に、待機状態を示す「Now Loading」アニメーションを表示させる方法を解説します。シンプルなコードで、通信中にユーザーへ視覚的なフィードバックを提供できるため、利便性が向上します。 jQuery で非同期通信処理をしている間に「Now Loading」的なアニメーション画像を表示する、というのはよくあるパターンですが、その方法の解説です。 ローディング中の画像を表示するスクリプト 例えば、以下のような html の id="message" の内容を Ajax によって変更したい場合。 <p id="message">ここのメッセージが非同期通信後に変更されます。</p> <form method="GET" action="#"> <input type="button" value="ここをクリックでメッセージ変更" onclick
haraです。 前回のエントリのおまけで車が走るコンテンツを作りましたが、ここのところ絵をちょっとのっけるだけで大分コンテンツがかわいく仕上がることに味をしめてまいりました。 しかし、前回もそうだったのですが、タイムラインアニメをpng書き出しして利用しようとしたりするとロード時間で結構待たされてしまいます。（帯域にもよりますが） おそらくこういう画像の利用の仕方が今後増えると思ったので、wonderflで呼び出す用にwonderflでローディング表示を作ってみました。 おかげで前回の車コンテンツもこのような感じ、ストレス軽減です。 使い方 ・loadViewという名前のObjectインスタンスを用意します。 ・以下のようにクラスをインポートします。 import flash.display.Loader; import net.wonderfl.utils.WonderflSWFUrl;
busy.jsは、ページの指定したエリアに、半透明のレイヤーを重ね、ローディングのアニメーションを表示できるスクリプトです。 busy.js (loading indicators) デモページ ローディングのアニメーションは画像ではなく、Canvasで実装されています。 busy.jsの対応ブラウザは、IE6+, Fx1.5+, Op9+, Safariとなっており、jQueryやPrototypeなど他のスクリプトに依存せず単独で動作します。 オプション設定も豊富で、オーバーレイの色・不透明度、表示テキスト、ローディングイメージの色、サイズ、スピードなどをカスタマイズすることができます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
