Create Page Load Progress Bar with Pace.js
9
Create Your Own Page Load Progress Bar With
-
Upload
1stwebdesigner -
Category
Design
-
view
103 -
download
1
description
A tutorial on how to create a page load progress bar using Pace.js plugin.
Transcript of Create Page Load Progress Bar with Pace.js
Create Your Own
Page Load Progress Bar
With
Progress bar informs the user about the waiting time for a
page or specific task to load. A progress bar gives user-friendly experience and adds more value to the website.
Good thing there is this built-in JavaScript plugin
called Progess Automatically Certain to Entertain
which consists of a cool progress bar indicator.
You can click the link!
• 14 built-in themes
• Progress is detected automatically
• Automatically load a progress bar within any web page
Pace.js
Resources You Will Need
• Any background image
• Pace.js
See the demo here.
You just need to include Pace.js and the theme
CSS of your choice on your Head section and
you’re done.
Configuration
1. Set window.paceOptions before bringing
in the file:
2. Put options on the script tag:
Changing the Color of the Loading Bar
There are two ways to do this:
1. Customize colors through the Pace.js themes page
2. By going directly to the CSS file and changing the
background colors and border colors
Wanna learn more? Check out our Webinar!
