progress bar style : demo 5

HTML

                    

CSS

                    .progress-5{
                        padding: 4px;
                        background: rgba(0, 0, 0, 0.25);
                        border-radius: 6px;
                    }
                    .progress-bar-5{
                        height: 16px;
                        border-radius: 4px;
                        transition: 0.4s linear;
                        transition-property: width, background-color;
                        box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
                    }
                    #five:checked ~ .progress-5 > .progress-bar-5{
                        width: 5%;
                        background-color: #f63a0f;
                    }
                    #twentyfive:checked ~ .progress-5 > .progress-bar-5{
                        width: 25%;
                        background-color: #f27011;
                    }
                    #fifty:checked ~ .progress-5 > .progress-bar-5 {
                        width: 50%;
                        background-color: #f2b01e;
                    }
                    #seventyfive:checked ~ .progress-5 > .progress-bar-5 {
                        width: 75%;
                        background-color: #f2d31b;
                    }
                    #onehundred:checked ~ .progress-5 > .progress-bar-5 {
                        width: 100%;
                        background-color: #86e01e;
                    }
                    .radio {
                        display: none;
                    }
                    .label {
                        display: inline-block;
                        margin: 0 5px 20px;
                        padding: 3px 8px;
                        color: #000000;
                        text-shadow: 0 1px black;
                        border-radius: 3px;
                        cursor: pointer;
                    }
                    .radio:checked + .label {
                        color: #000000;
                        background:#B8C9D9;
                    }