progress bar style : demo 43

HTML

                        

CSS

                        .demo{
                            background: #deeaeb;
                        }
                        .progress-bar-outer{
                            background: #fff;
                            border-radius: 50px;
                            padding: 30px;
                            margin: 20px 0;
                            box-shadow: 0 0  10px rgba(209,219,231,0.7);
                        }
                        .progress{
                            height: 10px;
                            margin: 0;
                            overflow: visible;
                            border-radius: 50px;
                            background: #eaedf3;
                            box-shadow: inset 0 1px  10px rgba(0,0,0,0.1);
                        }
                        .progress .progress-bar{
                            border-radius: 50px;
                            position: relative;
                            animation: animate-positive 30s;
                        }
                        .progress .progress-bar:after{
                            content: "\f188";
                            font-family: "Font Awesome 5 Free";
                            font-weight: 900;
                            font-size: 30px;
                            color: #000077;
                            position: absolute;
                            top: -6px;
                            right: -24px;
                            transform: rotate(90deg);
                        }
                        @-webkit-keyframes animate-positive{
                            0%    { width: 0%;}
                            20%   { width: 3%;}
                            30%   { width: 9%;}
                            50%   { width: 15%;}
                            70%   { width: 25%;}
                            100%  { width: 90%;}
                        }
                        @keyframes animate-positive{
                            0%    { width: 0%;}
                            20%   { width: 3%;}
                            30%   { width: 9%;}
                            50%   { width: 15%;}
                            70%   { width: 25%;}
                            100%  { width: 90%;}
                        }
                    
License Terms