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%

Author: Tanmay Chakrabarty

Tanmay Chakrabarty is a former CSE student, currently working as a Senior Software Engineer with 5+ years of experience in the field of Web Application development in PHP+MySQL platform with strong skills in Javascript, JQuery, JQuery UI and CSS. He tries to write notes every week but fails due to heavy loads of duty.

Recommended Recommends

Comments

Contact Us