Pace.js: A Library For Page Load Progress Bar.

Pace.js for progress bar
Pace.js for progress bar

Pace.js is a great library to show progress bar on your website without much hassles. Pace.js can be used to show loading of whole website, a particular element in DOM, and also for AJAX calls.

Pace.js for page load

This library is very easy to use for showing progress bar for loading a page. For setting options for this functionality, you will have to set var paceOptions; before the library is called.

For Example:

  <script>

    window.paceOptions = {
      target: "#progress-bar"
    }

  </script>

  <script src="./plugins/pace/pace.js"> </script>
  <!-- Where Progress bar will be shown -->
  <div id='progress-bar' >
  <div>

Pace.js for AJAX Calls

The progress bar can be displayed for AJAX call progression. For that, you will have to disable pace.js onload with option startOnPageLoad.

  <script>
    window.paceOptions = {
      target: "#progress-bar",
      startOnPageLoad: false,
      ajax: true
    };
    $(document).ajaxStart(function() {
       Pace.start();
    }).ajaxStop(function() {
       Pace.stop();
    });
  </script>
  <script src="./plugins/pace/pace.js"></script>
  <script>
   Pace.track(function(){
      $.ajax({
         url: ...
         ...
      });
   });
  </script>
  <div id='progress-bar' >
  <div>

Pace.js for Elements

The progress bar can be displayed for different HTML elements loading too. For that, you will have to disable pace.js onload with option startOnPageLoad.

  <script>
    window.paceOptions = {
      target: "#progress-bar",
      elements: {
        selectors: ['img.timeline', 'div.user-profile']
      }
    };
  </script>
  <script src="./plugins/pace/pace.js"></script>
  <div id='progress-bar' >
  <div>

  <img class='timeline' >

  <div class='user-profile' >
  <div>

Be the first to comment

Leave a Reply

Your email address will not be published.


*