CSS+Javascript pulsating progress bar

A bit like spinner but for the web in html+css+javascript. No ajax involved. It just pulsates perpetually:

[download progress-bar.html]

<style type="text/css">
        /* inspired by http://digitalbush.com/projects/progress-bar-plugin */
	/* progress bar container */
	#progressbar{
		border:1px solid black;
		width:200px;
		height:20px;
		position:relative;
	}
	/* color bar */
	#progress{
		position:absolute;
		left: 20px;
		width:10%;
		height:100%;
		overflow:hidden;
		background-color:#369;
	}
</style>
<script language="JavaScript">
      marg = 0
      inc = 10
      function update() {
         e = document.getElementById("progress");
	 e.style.left = marg + "%";
	 marg = (marg + inc) % 100 ;
         if (marg == 0 || marg == (100 - inc)) {inc = - inc;}
         setTimeout(update, 150);
      }
      onload=update;
</script>
<div id="progressbar"> <div id="progress"> </div></div>

Posted by pierre on 8 March 2008 in misc

Leave a Reply

*