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-
frien...
Good thing there is this built-in JavaScript plugin
called Progess Automatically Certain to Entertain
which consists of a ...
• 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...
Wanna learn more?
Check out our Webinar!
Upcoming SlideShare
Loading in …5
×

Create Page Load Progress Bar with Pace.js

2,173 views

Published on

A tutorial on how to create a page load progress bar using Pace.js plugin.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,173
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Create Page Load Progress Bar with Pace.js

  1. 1. Create Your Own Page Load Progress Bar With
  2. 2. 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.
  3. 3. 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!
  4. 4. • 14 built-in themes • Progress is detected automatically • Automatically load a progress bar within any web page Pace.js
  5. 5. Resources You Will Need • Any background image • Pace.js See the demo here.
  6. 6. You just need to include Pace.js and the theme CSS of your choice on your Head section and you’re done.
  7. 7. Configuration 1. Set window.paceOptions before bringing in the file: 2. Put options on the script tag:
  8. 8. 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
  9. 9. Wanna learn more? Check out our Webinar!

×