Your SlideShare is downloading. ×
Create Page Load Progress Bar with Pace.js
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Create Page Load Progress Bar with Pace.js

1,014
views

Published on

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

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
1,014
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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