Simple progress bar

| Javascript | 0 Comments

Here's a simple recipe for creating your own progress bar using some javascript and css. This is what I implemented on my Rand() page.

<script type="text/javascript">
  $(document).ready(function() {
    function progress(n) {
      (function loop() {
        $('#progress-bar').html(n ? n*10 : "");
        $('#progress-bar').css("width", n*10 + '%');
        if (n--) {
          setTimeout(loop, 100);
        } else {
          // do something
        }
      })();
    }
    progress(10);
  });
</script>

In order to make it work, place a div somewhere on your page where you want the progress bar to appear.

<div id="progress-bar"></div>

I added some styling to make the progress bar look a bit more professional.

#progress-bar {
  background-color: #2A83A2;
  background-image: linear-gradient(#2A83A2, #165E83);
  border-color: #165E83;
  height: 20px;
}

Here's a demo you can try out for yourself.

Progress bar (100)
Do something!

Leave a comment

Random entries

Here are some random entries that you might be interested in:

Recent Assets

  • Tenerife-flight-path.png
  • listen-to-me-marlon.jpg
  • sneeuwval.jpg
  • frozen-crystals.png
  • winter-is-coming.png
  • donald-trump.png
  • Rex-indian-headdress.png
  • Liam-future-famous-golfer-2016-10.jpg
  • number-one.png
  • Mom-and-me-2016.png
  • 636101580191153661-Kiffen-0003675-02.jpg
  • the-haskell-road-ro-logic.png

Golf Handicap

Information

This personal weblog was started way back on July 21, 2001 which means that it is 7-21-2001 old.

So far this blog contains no less than 2279 entries and as many as 1881 comments.

Important events

Graduated from Stanford 6-5-1979 ago.

Kiffin Rockwell was shot down and killed 9-23-1916 ago.

Believe it or not but I am 10-11-1957 young.

Began well-balanced and healthy life style 1-8-2013 ago.

My father passed away 10-20-2000 ago.

First met Thea in Balestrand, Norway 6-14-1980 ago.