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

  • tegen-par-2024-2nd-place.jpeg
  • stanford-reunion.png
  • kiff.png
  • hoid.png
  • Dad-in-front-of-log-cabin.png
  • mistborn-trilogy.png
  • 2024-03-Heren1-27h.png
  • three-body-problem.png
  • 10CC.png
  • minds-and-machines.jpeg
  • puglia.png
  • 2023-09-24-jong-tegen-oud-1.jpg

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 2518 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.