This article briefly introduces the plugin pace.js.

Introducing pace.js into the page, the page will automatically monitor your requests (including ajax requests), lag in the event loop,The loading status and progress will be recorded on the page.This plugin is very compatible,Compatible with all major plug-ins above ie8,And its strength is thatYou can also introduce the theme style of loading progress bar,You can choose any color and multiple animation effects (such as minimalism, flash, mac osx, left fill,Top padding,Counters and bouncing animation effects), if you are good at modifying css animation, you can make infinite possibilities of animationAdd personalized features to your website!

Calling method:

Just introduce pace.js and theme files:

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

Custom configuration:

pace.js will automatically load into the page,No need to hook into any code,Progress is automatically detected.If i want to make some adjustments,You can set window.paceoptions to customize the configuration:

 //disable the "elements" source
 elements:false, //only show the progress on regular and ajax-y page navigation, //not every request

You can also put custom settings in script tags, for example:

<script data-pace-options="{" ajax ":false}" src="pace.js"></script>

If you use amd or browserify to load modules,You can set it like this (for example:start):

define (["pace"], function (pace) {
 pace.start ({

Using api:

List of apis exposed by pace.js:

pace.start:start showing progress bar,If you are not using amd or browserify to load modules,This will be executed by default.

pace.restart:The progress bar is reloaded and displayed.

pace.stop:Hide the progress bar and stop loading.

pace.track:Monitor one or more requested tasks.

pace.ignore:Ignore one or more requested tasks.

Basically this is how to use it,There are other ways to use it,Everyone goes to the official website to see a more detailed introduction.Hope this plugin can help everyone!

  • Previous In-depth analysis of thread synchronization and inter-thread communication in Java
  • Next Examples of multithreaded programming in Java