The Goal
Creating progress bar using pure CSS. The final result will look like this:
54%
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>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">54%</span> <div id="progress_bar" style="width: 54%"></div> </div> </body> </html> - Save it to some location i.e. css-pbar.html
- Open the file using web browser
- Done.
Tested Browser
- Firefox 3.5
- Chrome 4.0.2
- Opera 10
Download the Code
css-progress-bar.zip via ziddu.com.Size: 0.72kb
MD5 Checksum: 76424cd4f26e5ab2f1e75557e17ba41b
2 komentar:
Way cool
Thanks this is awesome
Post a Comment