progress bar style : demo 26

80%
60%
75%

HTML

                        
80%
60%

CSS

                        .progressbar-title{
                            position: relative;
                            margin-bottom:10px;
                            background:#26c9ff;
                            border-radius:5px;
                            padding: 30px 10px 30px 80px;
                        }
                        .progress{
                            height:10px;
                            border-radius:10px;
                            box-shadow: none;
                            line-height: 35px;
                            margin:0;
                            background:#0ba2da;
                        }
                        .progress .progress-bar{
                            background: #fff;
                            animation: progress 6s;
                        }
                        .progressbar-title .progressbar-value{
                            position:absolute;
                            left:15px;
                            top:14px;
                            color:#fff;
                            font-weight: bold;
                            background:#0ba2da;
                            padding:10px 15px;
                            border-radius:5px;
                        }
                        .progressbar-title.red{
                            background:#ff5a4e;
                        }
                        .progressbar-title.red .progressbar-value,
                        .progressbar-title.red .progress{
                            background:#ff3330;
                        }
                        .progressbar-title.orange{
                            background:#f17d4e;
                        }
                        .progressbar-title.orange .progressbar-value,
                        .progressbar-title.orange .progress{
                            background:#dc551d;
                        }
                        @-webkit-keyframes progress{
                            0% { width: 0%;}
                        }
                        @keyframes progress{
                            0% { width:0%; }
                        }
                    
License Terms