[JS]シンプルでかっこいいナノサイズのバーを実装するjQueryいらずの超軽量スクリプト -nanobar
Post on:2014年3月3日
sponsors
ブラウザの上部に、シンプルでかっこいいナノサイズのバーをアニメーションで実装するスクリプトを紹介します。
jQueryなど他のスクリプトは必要なく、725bytesで超軽量です。
nanobarのデモ
デモは、モダンブラウザでご覧ください、IEは8+で。
バーはデフォルトで、50%に設定されています。
デモページ：nanobar = 50%
ページ中央の3つのボタンで、バーの長さを変更できます。
デモページ：nanobar = 30%
デモページ：nanobar = 60%
右端の「100%」をクリックすると、100%に達した後にスマートなアニメーションでバーが消えるのもかっこいいです。
nanobarの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして</body>の上あたりに記述します。
<body> ... <script src="path/to/nanobar.js"></script> </body>
もし、browserifyを使用している時は、下記の記述でもOK
var Nanobar = require('path/to/nanobar')
Step 2: JavaScript
スクリプトを実行して、バーを設置します。
var nanobar = new Nanobar( options );
オプションでは、バーのカラー変更やidを設定できます。
var options = {
bg: '#acf',
// left target blank for global nanobar
target: document.getElementById('myDivId'),
// id for new nanobar
id: 'mynano'
};
var nanobar = new Nanobar( options );
バーの長さを任意の値にする時は、下記のように実行できます。
//move bar nanobar.go( 30 ); // size bar 30% // Finish progress bar nanobar.go(100);
sponsors
