[HTML/CSS] How to Make a Basic Progress Bar w/ Labeling

reloadmydeagle Feb 12, 2015

  1. reloadmydeagle

    reloadmydeagle I LoVe GoldZ Lifetime Gold XPG Retired Staff
    135/188

    Joined:
    Oct 30, 2013
    Messages:
    1,609
    Likes Received:
    656
    Trophy Points:
    135
    Gender:
    Male
    Location:
    Texas
    Console:
    Xbox One
    Hey XPG I'm going to show you how to code a simple progress bar using HTML & CSS.

    Step 1 - The CSS
    1. Insert the following CSS classes into your page's code.
    2. You can edit this to style the bar to your liking.
    Code:
    .progress {
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    }
    .progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #428bca;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
    }

    [hr]

    Step 2 - The HTML
    1. Insert the following HTML where you want the progress bar displayed on your site.
    2. Change the style property width:70%; and aria-valuenow="70" with the stage you want your progress bar at.
    Code:
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
          70%
        </div>
      </div>
    </div> 

    [hr]

    Step 3 - Publishing
    1. Save your changes
    2. Reupload that baby
    3. Behold the mighty progress bar! :p
     

Share This Page

Close