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

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

Report this snippet  

You need to login to post a comment.