The Goal
Creating animated progress bar using javascript and pure CSS. The final result will look like this:
The Process
- Open your favorite text editor and create a new file.
- Copy and paste code below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Animated CSS Progress Bar</title> <style type="text/css"> div.progress-container { border: 1px solid #ccc; width: 200px; margin: 2px 5px 2px 0; padding: 1px; float: left; background: white; position:relative; } div.progress-container div { background-color: #ACE97C; height: 20px; } div.progress-container span { width:200px; text-align:center; float:left; font: normal 12px Arial,sans-serif; margin-top: 3px; } </style> </head> <body> <div class="progress-container"> <span id="progress_text">0%</span> <div id="progress_bar" style="width: 0%"></div> </div> <script type="text/javascript"> var forever = true; function start_anim() { var ptext = document.getElementById('progress_text'); var pbar = document.getElementById('progress_bar'); var curval = parseInt(pbar.style.width); var speed = Math.floor(Math.random() * 250) + 10; document.title = "Speed: " + speed; curval++; ptext.innerHTML = curval + '%'; pbar.style.width = curval + '%'; if (curval > 99) { if (forever) { pbar.style.width = '0%'; setTimeout('start_anim()', speed); } } else { setTimeout('start_anim()', speed); } } start_anim(); </script> </body> </html> - Save the file with .html extension i.e: css-js.html
- Open the file using your web browser
- Done.
Tested Browser
- Firefox 3.5
- Chrome 4.0.2
- Opera 10
Download the Code
animated-css-progress-bar.zip via ziddu.com.Size: 0.9kb
MD5 Checksum: d82877115e220fedcf15b04673404ef1
2 komentar:
Great! very neat interface...
Thanks for sharing this..
what you've done just like your website's title
"Less Talk, More Example"
very nice ..
thanks a lot for the share
Post a Comment