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

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>

ダウンロード・参考

人気の記事

2017年、人気の無料WordPressテーマ100選
2017年、人気の無料WordPressテーマ100選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ11選
アドセンス運用に最適なWordPressテーマ11選

フリーランスITエンジニアの案件・求人情報サイト

フリーランスWebクリエイター大募集!「ギークスジョブ」

コメント

  • Posted on
  • Updated on
  • Views 602