progress bar style : demo 17

HTML5 89%
CSS3 75%
JavaScript 65%
jQuery 95%

HTML

                        
HTML5 89%
CSS3 75%

CSS

                        .progress_bar .pro-bar {
                            background: hsl(0, 0%, 97%);
                            box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.1) inset;
                            height:4px;
                            margin-bottom: 12px;
                            margin-top: 50px;
                            position: relative;
                        }
                        .progress_bar .progress_bar_title{
                            color: hsl(218, 4%, 50%);
                            font-size: 15px;
                            font-weight: 300;
                            position: relative;
                            top: -28px;
                            z-index: 1;
                        }
                        .progress_bar .progress_number{
                            float: right;
                            margin-top: -24px;
                        }
                        .progress_bar .progress-bar-inner {
                            background-color: hsl(0, 0%, 88%);
                            display: block;
                            width: 0;
                            height: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            transition: width 1s linear 0s;
                        }
                        .progress_bar .progress-bar-inner:before {
                            content: "";
                            background-color: hsl(0, 0%, 100%);
                            border-radius: 50%;
                            width: 4px;
                            height: 4px;
                            position: absolute;
                            right: 1px;
                            top: 0;
                            z-index: 1;
                        }
                        .progress_bar .progress-bar-inner:after {
                            content: "";
                            width: 14px;
                            height: 14px;
                            background-color: inherit;
                            border-radius: 50%;
                            position: absolute;
                            right: -4px;
                            top: -5px;
                        }
                    
License Terms