[JS]シンプルでかっこいいナノサイズのバーを実装するjQueryいらずの超軽量スクリプト -nanobar

ブラウザの上部に、シンプルでかっこいいナノサイズのバーをアニメーションで実装するスクリプトを紹介します。

jQueryなど他のスクリプトは必要なく、725bytesで超軽量です。

サイトのキャプチャ

nanobar
nanobar -GitHub

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);

top of page

©2017 coliss