CODEWITHSUNDEEP
jquery-uiprogress-bar
seladb
seladb

Reputation: 936

jQuery UI - how to show progress bar on top of page just when loading

I would like to use jQuery progress bar and add it to the top of the page only when the page is loading (and make it disappear afterwards), a behavior which is somehow similar to the progress bar in GitHub:

enter image description here.

How can I do that?

I currently have the following HTML code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  </head>
  <body>
    <div id="content">
      <div id="progressbar"></div>
      <div id="my-content">
          My page content goes here....
      </div>
    </div>
  </body>

Javascript:

$('#progressbar').progressbar({
    value: false
});

Upvotes: 3

Views: 7457

Answers (2)

John
John

Reputation: 433

I'd advise you to use NProgress. It's not using jQuery-UI, but it's really slim and easy to integrate. I've used it in several projects and it worked fine.

With NProgress you don't have to have HTML code, you just need to run the following lines:

  • NProgress.configure() if you need some special configurations
  • NProgress.start() to start the progress bar
  • NProgress.inc() to increment the progress
  • NProgress.done(true) once progress complete

That's it! Very easy!

Upvotes: 9

Maximilian
Maximilian

Reputation: 531

I’d suggest using PACE (http://github.hubspot.com/pace/docs/welcome/). It does exactly that and makes it very easy to customize!

Upvotes: 1

Related Questions