Fine Uploader a.k.a valums file-uploader 機能全部入りアップローダー実装jQueryプラグイン「Fine Uploader」。 プログレスバー付きでアップロード後の即時サムネイル表示、ドラッグ＆ドロップアップロード、複数ファイルアップロード対応など全部入り。 BootStrapのテーマにあわせることもできます。IE7移行も対応しています。 モダンなアップローダーを作るなら１つの選択肢になりそうです 関連エントリ 画像選択時にサムネイルが出て分かりやすい進捗付きjQueryファイルアップローダー「jQuery File Upload Demo」 HTML5を使ったファイルアップロード用プログラム集

progress.js スピード感が凄いプログレスバー実装ライブラリ「progress.js」 それ、ちょっと速すぎるで、といってしまうであろうプログレスバー実装ライブラリ。 若干目が回りますが、スピード感重視な方にはオススメのプログレスバーが実装できます ずっと見ていたら気持ち悪くなって来ましたorz 一番下の一色の物が目に優しいかもしれません。 尚、他のライブラリに依存しない点も特徴 関連エントリ HTML5でプログレスバー付きファイルアップロードを実現する例 HTML5を使ったファイルアップロード用プログラム集 CSS3でアニメーションする読込バー実装サンプル

12 Free jQuery Pre-Loader Plugins CSS3やCanvas、JS等を使ったローディング画像実装プラグイン１２がまとまっています。 画像の種類が色々ある上に実装方法も、単なる画像ではない方法が選べます。 画像じゃない方法でローディング画像を実装したい場合は参考にするとよさそう。 画像ではないため、軽量でレスポンシブなサイトにも使えるというところですかね 関連エントリ 超カッコいいローディングを実現できるjQueryプラグイン「Percentage Loader」 HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」 画像や外部CSSなしでカスタマイズ可能なローディング画像作成ライブラリ「spin.js」

Percentage Loader 超カッコいいローディングを実現できるjQueryプラグイン「Percentage Loader」 次のようなカッコいいローディングが簡単に実装できます。Canvas描画なのでサイズ変更等も自由にできるみたい 超シンプルに実装可能です なんとなくローディング後の画面を期待させる物となっていますので、ローディング後も気合を入れたいところですね 関連エントリ HTML5でプログレスバー付きファイルアップロードを実現する例 プログレスバーをバリバリに自分好みにできるjQueryプラグイン「Extended Progress Bar」

CSS3 Progress BarsはCSS3を使ってプログレスバー表示を行います。 最近、複雑な表示ですらCSSだけでこなしてしまうようなハックが流行っていますが、CSS3 Progress BarsはCSS3だけを使ってプログレスバーを表示します。 表示例です。角丸や複数の組み合わせ表示ができます。 さらに細めのタイプもあります。 コードです。styleのwidthでバーの長さを指定します。 色の指定もclass名でできます。 組み合わせの場合はこんな感じです。 細いタイプは_tinyをつければOKです。 CSS3 Progress BarsはCSS3だけでプログラレスバーを生成しているのでJavaScriptなどで動いたりするようにするのも簡単に実現できそうです。 CSS3 Progress BarsはCSS3製、MIT Licenseのオープンソース・ソフトウェアです。 MOONG

Html5 File Upload with Progress On Matlus HTML5でプログレスバー付きファイルアップロードを実現する例 これまでの仕組みとは違う、HTML5のProgress Eventsを使って実装しています。 ブラウザのAPIで取れるようになるのでこれまでのハックっぽい実装法ではない方法で実装できます こういう機能が当たり前に使えたら楽だなと思いつつ、覚えることがどんどん出てきて大変だなぁという感じもしますね 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル HTML5ベースのオープンソースなマインドマップ作成ツール「mindmaps」 HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」

HTML5 Canvasを使って、ローディング用のアニメーションを作成する超軽量（約3K）のスクリプトを紹介します。 デモページ Sonicの実装 Square（矩形）とCircle（円形）を例に実装方法を紹介します。 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="sonic.js"></script> JavaScript: Square（矩形） あとは、JavaScriptで記述するだけです。 var square = new Sonic({ width: 100, height: 100, fillColor: '#000', path: [ ['line', 10, 10, 90, 10], ['line', 90, 10, 90, 90], ['line', 90, 90, 10, 90], ['line', 10, 90, 10, 10]

spin.js 画像や外部CSSなしでカスタマイズ可能なローディング画像作成ライブラリ「spin.js」。 あのローディング画像を画像を使わず、外部CSSも使わない方法で実現でいるライブラリです。 パラメータをいじくれば簡単にローディングイメージをカスタマイズ可能です。 独立して動く方式をベースとして、jQueryプラグイン方式で動くコードも公開されているみたいです。 最初は画像だったものが、画像不使用に変化し、ライブラリによってより便利になってますね。 関連エントリ 画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」 Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ ブロック内コンテンツを読込画像と共にAjaxで読み込ませアニメーション切替えできるjQueryプラグイン「Ajaxloader」

CSS3 Progress Bars | CSS-Tricks CSS3で動くプログレスバー作成サンプルが公開されています。 JavaScriptに頼ることなく実現できています。jqueryに思いっきり頼ってました。大変失礼！ デモページはこちら 一本のバーの実現に必要なコードは次のようにシンプル。 <div class="meter"> <span style="width: 25%"></span> </div> デザインが可愛いのでこうしたテイストのサイトにそのまま使えます。 CSS3が動くスマートフォンでも使えそうですね。 これはとてもナイスです。 関連エントリ ステップで学べるCSS3ボタンのデザインチュートリアル 便利なCSS3ツール6つ＋α CSS3のジェネレーター１４種 IE6-8でもCSS3が使えるようになる「CSS3 PIE」

How to create a kick-ass CSS3 progress bar - CatsWhoCode.com イカしたデザインのプログレスバーをCSS3で作成する例 次のようなデザインのプログレスバーをCSS3とJSを使って実装する例です。 バーの背景がアニメーションする上に進捗によって滑らかにアニメーションしてくれます。 そのまま応用して使うことも出来ますし、解説を見て勉強することも出来ます。 CSS3なブラウザで動きを見てみましょう。 実装ページ 関連エントリ CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」 IE6-8でもCSS3が使えるようになる「CSS3 PIE」 便利なCSS3ツール6つ＋α CSS3のジェネレーター１４種

MBProgressHUDはiPhone/iPod Touch用のオープンソース・ソフトウェア。iPhoneアプリではネットワークを利用したものが数多く存在する。常に高速なネットワーク化であれば気にならないだろうが、回線のつながりが悪い時などには待たされるのは相当なストレスになる。 説明付きローディングアイコン そこでよく使われるのがローティングを示す表示だ。そうした表示を行うことでフリーズした訳ではないとユーザに示すことができ、ストレスを軽減させられる。そのやり方は幾つかあるが、モックとしてMBProgressHUDを紹介しよう。 MBProgressHUDはiPhone/iPod Touchアプリで使えるライブラリで、数種類のローディング表示例を提供している。一つはただ画面の中央にアイコンが表示されるものだ。ほんの少しの間であればこれでも十分だろう。二つ目はラベルを追加したもので、説明

Creating 10 Most-Used Javascript Techniques Using Pure CSS Styling | DevSnippets CSSオンリーでJSを使った風のよく使われるテクニック集１０。 よく使われているかどうかは実際はよくわかりませんが、ピュアCSSということでなかなか凄いテクニック集がまとまっています。 我こそはCSSマスターという方は覚えておいてもよさそうです。 写真ギャラリー カーソルを合わせると拡大するアイコン アニメーションするコンテンツスライダー アニメーションするプログレスバー ピュアCSSなLightBox かなり色々なテクニックがなされているようですが、実用的なものが多いですね。 関連エントリ JavaScript使ってないのに使ってる風のピュアCSSなテクニック集 ピュアCSSで実装された吹き出しのデザイン例色々 クリーンなデザイ

Plugins | jQuery Plugins クリックした位置にそのままローディング画像を出せるjQueryプラグイン「Spinner」。 クリックした位置の横にちょこんとローディング画像を出すことができるjQueryプラグインです。 ajax のローディング中に表示したり出来ますね。 省スペースで便利に使えそうです。 $(element).spinner() というふうに簡単に設定できます。 関連エントリ 現在ローディング中であることをマウスカーソル近くにちょこんと可愛く出せる「prettyLoader」 Ajaxローディング時に使える画像ジェネレーター色々

33 Amazing Examples of Flash Preloaders | Naldz Graphics Flashのローディング画面のアイデア集。 Flashのローディング画面というと、パーセンテージを表示してみたり、円形のものが回転したりを想像しますが、他にもアイデアは色々とあります。 高速回線となった今でも、重いコンテンツを表示する際は必要となるローディング画面のアイデア集を覚えておくとよいかも。 読み込み中に遊べるコンテンツを置いた例 読み込み状況をX/Y軸のグラフで表示。カーソルにパーセンテージもついてきます ハチがはちみつのビンを一杯にしてくれます。アニメーションを眺めていればローディングが終わります バッテリー残量を増やしていくように、なんだかチャージされている気がして気持ちがいいかも 燃料のメーターっぽくローディング 凝りすぎてローディング画面に容量を取られすぎてし

ページにFlashみたいな読込み状況を付けた上でクールに表示するjQueryプラグイン「QueryLoader」 2009年10月05日- ページにFlashみたいな読込み状況を付けた上でクールに表示するjQueryプラグイン「QueryLoader」。 Flashでよくある〜％読み込みました、みたいなものをJavaScriptで実現できるみたいです。ページを完全に読み込ませてから見てもらいたい場合に使えそうです。 読込みバーが右に伸びていって進捗表示 終わったらアニメーションでカッコよく画面切り替え ページ表示したところ 必要なJavaScriptとCSSを<script>と<link>で読み込んだら、次のように初期化するだけで実装できます。 <script type='text/javascript'> QueryLoader.init(); </script> スクリプトのダウンロー

Multiple File Upload With Progress Bar Using jQuery jQueryで実装する進捗グラフ付き複数ファイルアップローダー。 次のようなマルチファイルアップローダーが実装できるjQuery＋PHPなソースが公開されています。 アップロード部分には swfupload を使っているみたい。 サイトではjQueryを使っていて、こういう機能を実装したいという場合に覚えておくと使えるかも。 関連エントリ jQueryでチェックボックスをすごい形にカッコよくしちゃう方法 jQueryでリアルタイムにCSSを書き換えるサンプル jQuery用のGUIコンポーネントプロジェクト「mbideasproject」がすごい ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集