Skip to content

Instantly share code, notes, and snippets.

@Raminsiach

Raminsiach/stepprogressbar.html

Created December 18, 2015 10:36
Show Gist options
  • Save Raminsiach/e3410c75b496578ec3a0 to your computer and use it in GitHub Desktop.
Save Raminsiach/e3410c75b496578ec3a0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Raminsiach created this gist Dec 18, 2015.
    65 changes: 65 additions & 0 deletions stepprogressbar.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,65 @@
    <html>
    <head>
    <title>Step progress bar</title>
    <style type="text/css">
    .container {
    width: 100%;
    }
    .progressbar {
    counter-reset: step;
    }
    .progressbar li {
    list-style-type: none;
    float: left;
    width: 33.33%;
    position: relative;
    text-align: center;
    }
    .progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #ddd;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    background-color: white;
    }
    .progressbar li:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #ddd;
    top: 15px;
    left: -50%;
    z-index: -1;
    }
    .progressbar li:first-child:after {
    content: none;
    }

    .progressbar li.active {
    color: green;
    }
    .progressbar li.active:before {
    border-color: green;
    }
    .progressbar li.active + li:after {
    background-color: green;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <ul class="progressbar">
    <li class="active">Step 1</li>
    <li>Step 2</li>
    <li>Step 3</li>
    </ul>
    </div>
    </body>
    </html>