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

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

  • flitsfoto-B5H3-IoN-b9E4tr9OrFarmWfWrP5pxuN8AgYw45ABAnqqDrmjSqIc-KKoAQ9Bu_k.jpeg
  • flitsfoto-mjuWdZ1wBk6gJbu9rP7Bu6bETxZplWXFUoEJIA_HfMF0i0MQfgF_y5024mEsOBfH.jpeg
  • Kiffin-10th-hole-2017-05-small.jpg
  • Kiffin-10th-hole-2017-05.jpg
  • ember-rails-and-json-api.png
  • putting-mat.png
  • finished-just-in-time.png
  • Tenerife-flight-path.png
  • listen-to-me-marlon.jpg
  • sneeuwval.jpg
  • frozen-crystals.png

Golf Handicap


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 2288 entries and as many as 1877 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.