progress bar style : demo 6

25%
50%
75%

HTML

                    

                        

                            

                                

                                    25%

CSS

                    .progress-6 {
                        border-radius: 12px;
                        box-shadow: 0 1px rgba(255, 255, 255, 0.8) inset, 0 2px 4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 6px #b6babe, 0 7px rgba(255, 255, 255, 0.1);
                        overflow: hidden;
                        padding: 0 15px;
                        margin-bottom: 40px;
                    }
                    .progress-6 .progress-val {
                        float: right;
                        margin-left: 15px;
                        font: bold 15px/34px Helvetica, Arial, sans-serif;
                        color: #333;
                        text-shadow: 0 1px rgba(255, 255, 255, 0.6);
                    }
                    .progress-bar-6 {
                        display: block;
                        overflow: hidden;
                        height: 8px;
                        margin: 13px 0;
                        background: #b8b8b8;
                        border-radius: 4px;
                        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.6);
                    }
                    .progress-6 .progress-in {
                        display: block;
                        min-width: 8px;
                        height: 8px;
                        background: #e95d00;
                        border-radius: 4px;
                        box-shadow: inset 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
                    }