How to make a page load time progress bar?

Asked

Viewed 2,922 times

6

How to make a progress bar that loads as the page loads?

Barra de progresso

Like on this site here:

http://sinalverdecaxias.com/

I saw an example in codepen.io, is kind of like this, I don’t know what this progress bar is really called.

javascript html css progress-bar

1 answer

6


You can use the Pace.js, which is very simple and has several options with cool visuals.

To put in practice just download and add the call:

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

And then, make initial settings to customize (are not obligatory) the Pace.js:

paceOptions = {
  elements: false,
  restartOnRequestAfter: false
}

If you have any questions have more details on Pace documentation.

Browser other questions tagged javascript html css progress-bar

You are not signed in. Login or sign up in order to post.