2021年02月19日(金)
設定が一切不要でページロード中にプログレスバーを自動で実装してくれるスクリプト・「pace.js」
pace.js
See the Pen rNWwwap by kachibito
(@kachibito) on CodePen.
pace.jsは自動でページ読み込みのローディングを実装してくれるスクリプトです。何の設定も無くJSとCSSを読み込むだけで上デモのようにページロードのプログレスバーを表示してくれます。非依存で単体で動作してくれます。デモではロード時間までをパーセントで表示していますが、これらも全て自動で処理してくれます。
プログレスバーはCSSで管理されており、いくつか選べるようになっています。プロジェクトページでCSSがダウンロードできるのでお好みのスタイルを選んでください。
CDNも用意されています。テストしたいなら上の2行をheadタグ内に加えるだけで、ページロード時のプログレスバーを実装しま...
0
20
9
22author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
‹ PREV
こういう本を待ってた！WebやスマホのUIに使用する言葉の使い方、語順、表記が学べる -UXライティングの教科書
NEXT ›
プログラミング学習を通して成長したこと〈受講生と保護者の本音とは〉
関連記事
Kindle本、読書の秋特大セールが開催！ セール初登場もあり、デザイン・Web制作・イラストの良書がお買い得です
Codepenやjsfiddleなどのようにブラウザ上でフロントエンド開発やembedが可能なOSS・「DevCanvas」
8/22までKindle本の夏の特大セールが開催！ セール初登場も多く、デザイン・Web制作・イラストの良書がお買い得です
国産ヘッドレスCMSとして注目されているmicroCMSとNext.jsを使用したWebサイトのモダンな制作方法を学べる解説書 -モダンWebサイト制作入門
Kindle本のプライムデー特大セールが開催！ Web制作やUIデザイン、イラスト関連の良書が半額で、超お買い得です
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『設定が一切不要でページロード中にプログレスバーを自動で実装してくれるスクリプト・「pace.js」』についてまとめています。
この記事は特にjavascript・ダウンロードについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
