advanced code snippet search

Posted By

dark-kira on 05/05/09


Tagged

bar status de progress barra progreso estado


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

vali29


Status Bar

 / Published in: HTML
 

Here leave a script for who want to create of simply form a status bar in html

Aqui dejo un script para quien quiera crear de forma sencilla una barra de progreso en html

Expand | Embed | Plain Text 
  1. <body>
  2.  
  3.     <style type="text/css">
  4.       .ProgressBar     { width: 13em; border: 1px solid black; background: #ffffff; height: 1.35em; display: block; }
  5.       .ProgressBarText { position: absolute; font-size: 0.75em; width: 17em; text-align: center; font-weight: bold; }
  6.       .ProgressBarFill { height: 100%; background: #a0c43f; display: block; overflow: visible; }
  7.     </style>
  8.  
  9.  
  10.  
  11. <div class="ProgressBar">
  12.       <div class="ProgressBarText">Status bar 1</div>
  13.  
  14.       <div class="ProgressBarFill" style="width: 85%;"></div>
  15.     </div>
  16. <div class="ProgressBar">
  17.       <div class="ProgressBarText">Status bar 2</div>
  18.  
  19.       <div class="ProgressBarFill" style="width: 92%;"></div>
  20.     </div>
  21. <div class="ProgressBar">
  22.       <div class="ProgressBarText">Status bar 3</div>
  23.  
  24.       <div class="ProgressBarFill" style="width: 75%;"></div>
  25.     </div>
  26. <div class="ProgressBar">
  27.       <div class="ProgressBarText">Status bar 4</div>
  28.  
  29.       <div class="ProgressBarFill" style="width: 60%;"></div>
  30.     </div>
  31. </body></html>

Report this snippet  

You need to login to post a comment.