fill horizontal Submit fill vertical Submit shrink horizontal Submit shrink vertical Submit rotate-angle-bottom perspective Submit rotate-angle-top perspective Submit rotate-angle-left perspective Submit rotate-angle-right perspective Submit
ProgressJs is a JavaScript and CSS3 library which helps developers create and manage progress bars for any object on the page. You can design your own template for progress bars or simply customize them. You can use ProgressJs to show the progress of loading contents (images, videos, etc.) on the page to the users. It can be used on all elements including textboxes, textareas or even the whole bod
Utilisation Code Javascript <script type="text/javascript" src="_js/jquery.progression.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.progressbar').progression(); }); </script> Code CSS .progressbar { border:1px solid #000000; width: 200px; height: 20px; line-height: 20px; text-align: center; } Code HTML <div class="progressbar">50 %</div> Options disponibles Curre
UPD: fixed IE compatibility issue (thanks Kevin – Sep 19 2008 / 6pm) UPD: setPercentage now parses the targetPercentage to an Integer to avoid infinite loop (thanks Jack – Sep 07 2008 / 9pm) UPD: Moved from Event.Observe(window, ‘load’, fn) to document.observe(‘dom:loaded’, fn) in order to force people to use an up to date Prototype release. UPD: setPercentage now takes an overrideQueue param. If
操作感はAJAXで、画像などはCSSで実装されたわかりやすいプログレスバーです。進捗状況などの表示が簡単にできます。また、クリックする度に10%増やしたり、あるいは減らしたりといったことも可能。いろいろなウェブアプリの開発などに応用できそうです。 詳細は以下から。 WebAppers Simple Ajax Progress Bar with CSS by WebAppers ライセンスはMITライセンスで提供されており、以下から実際に試してみることができます。 Demo http://www.webappers.com/progressBar/ 実際にダウンロードしてみると、prototype.jsを使っており、使用するイメージ画像は2種類。その組み合わせでバーの増減を表現するとは、なかなかいい発想。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く