Simple progress bar

| Javascript

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!

Random entries

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

Recent Assets

  • 2023-09-24-jong-tegen-oud-1.jpg
  • 2023-09-24-jong-tegen-oud-2.jpg
  • just-call-me-fred.png
  • foggy-morning.png
  • oma-2023-07-27.jpg
  • i-almost-died.png
  • chipping-from-twenty-meters.png
  • de-koepel.png
  • screenshot-www.udemy.com-2023.05.18-10_02_39.png
  • screenshot-www.golf.nl-2023.05.08-09_57_30.png
  • IMG-20230423-WA0000.jpg
  • me-and-my-radio-paradise-hat.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 2498 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.

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

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

My father passed away 10-20-2000 ago.

My mother passed away 3-27-2018 ago.

Started Gishtech 04-25-2016 ago.