プリローダーバーを実装できるJavaScriptライブラリ Material Design Preloader

2015.01.02

Material Preloader

Material Design Preloaderはスタイリッシュでちょっと楽しいプリローダーバーを実装できるJavaScriptライブラリです。

オリジナルデモ

オリジナルデモを用意しました。上の色が変わるバーの部分です。

実装方法

jQueryとmaterialPreloader.jsを読み込みます。

<script src="js/jquery.min.js"></script>
<script src="js/materialPreloader.js"></script>

cssも読み込みます。

<link rel="stylesheet" href="css/materialPreloader.css" type="text/css" />

html部分はbodyタグだけでOKです。

<body>
</body>

細かなオプションの指定もできます。

<script>
$(function() {
	 preloader = new $.materialPreloader({
        position: 'top',
        height: '5px',
        col_1: '#159756',
        col_2: '#da4733',
        col_3: '#3b78e7',
        col_4: '#fdba2c',
        fadeIn: 200,
        fadeOut: 200
    });
});
</script>

ダウンロード・参考