Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Creating Stylish CSS3 Progress bars

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 550
    Comment on it

    If you want to create progress bars using only css3, you can see here how to make it.

    HTML Base
    The bar in which the progress will be shown can be taken as a <div> with some class named outer. Inside this outer you can take a span in which the progress area is filled.

    <div class=outer>
      <span style="width: 25%"></span>

    Start of CSS
    The div wrapper is the container of the progress bar. Here we are not setting the width, so that it will take place according to its outer container. You can set height accordingly.

    .outer {
        height: 20px;  /* Can be anything */
        position: relative;
        background: #555;
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        padding: 10px;
        box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);

    The span that is inside the outer div is filled with the area of progress. We will make it a block element with the 100% height, so that it can be stretched to fit into that.

    .outer > span {
      display: block;
      height: 100%;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      background-color: rgb(43,194,83);
      background-image: linear-gradient(
        center bottom,
        rgb(43,194,83) 37%,
        rgb(84,240,84) 69%
        inset 0 2px 9px  rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4);
      position: relative;
      overflow: hidden;

    You can see the demo here.


 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: