[WEB] 12種類設置できるprogress barのご紹介

NEWS & TOPICS

07 04 2016

ロールオーバーの紹介

WEBサイトを表示されるまでに時間がかかる場合、ローディング画面を表示することがあります。
そんなローディング画面を簡単に12種類設置できる「PACE Automatic page load progress bar」のご紹介です。

■使用方法

ダウンロードした「pace-master」フォルダの中にある「pace.js」を<head>に読込ます。
次に「themes」の中にあるcssを読込ます。

<head>
  <script src="js/pace.js"></script>
  <link href="css/themes/pace-theme-barber-shop.css" rel="stylesheet" />
</head>

これで設置は完了です。

「themes」の中にあるcssから好きなprogress barを選択し選ぶだけで、下記のようなprogress barを設置できます。

「PACE」サイト

より詳しくは「PACE」のデモをご覧ください。

以上簡単に設置できるprogress barのご紹介でした。

ホームページ・スマートフォンサイト・ランディングページ・ポータルサイト・ECサイトなどの
制作を通じてクライアント様のウェブ上での目標を実現化いたします。

「小さなアイデアが大きなイノベーションを起こす！」
をコンセプトに、クライアントとユーザーの双方がイノベーションを起こすご提案をいたします。

クライアント様も気が付かない小さなアイデアを積み重ねて、大きなインパクトのあるソリューションを創造いたします。