プリローダーバーを実装できる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>

ダウンロード・参考

関連記事

人気の記事

目的別おすすめのWordPressテーマ(無料・有料)【2018年版】
目的別おすすめのWordPressテーマ(無料・有料)【2018年版】
2018年におすすめしたい、日本語対応の有料WordPressテーマ10選
2018年におすすめしたい、日本語対応の有料WordPressテーマ10選
【2018年版】アドセンス運用に最適なWordPressテーマ10選
【2018年版】アドセンス運用に最適なWordPressテーマ10選

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

コメント

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

  • Posted on
  • Updated on
  • Views 651