Creating a Progress Bar using CSS and HTML (Design Only)





50%

Creating a progress bar is not that hard, actually simple. But this simplicity depends on your needs. However, here is the CSS and HTML for a very simple Progress Bar.

The CSS:


.dnd_progress_bar_container{

                width:100%; /*Change this value to your desired width, such as
500px*/

                height:100px;

                border:1px solid #009;

                padding:2px;

                position:relative;

                }

.dnd_progress_bar_container .the_bar{

                height:100px;

                background-color:#9F9;

                width:50%;

                }

.dnd_progress_bar_container .the_percentage{

                width:100%;

                text-align:center;

                color:#000;

                font-weight:bold;

                line-height:104px;

                position:absolute;

                top:0;

                left:0;

                }


The HTML:
<div class="dnd_progress_bar_container">
     <div class="the_bar">
     </div>
     <div class="the_percentage">
          50%
     </div>
</div>




Output:
50%

Recommended Recommends

Comments

Contact Us

Loading...