#progressbar {
    background-color: transparent;
    border: medium none;
    clear: both;
    height: 15px;
    margin: 0.6em auto;
    padding: 2px;
    width: 50%;
}

#progress {
    background: #3b44ab; /*-- Color of the bar --*/
    height: 15px;
    width: 0%;
    max-width: 100%;
    float: left;
    -webkit-animation: progress 2s 1 forwards;
    -moz-animation: progress 2s 1 forwards;
    -ms-animation: progress 2s 1 forwards;
    animation: progress 2s 1 forwards;
    border-radius: 4px;
}

#pbaranim {
    height: 15px;
    width: 100%;
    overflow: hidden;
    background: url('https://kissingmagic.com/media/7uo1osj.gif') repeat-x;
    -moz-opacity: 0.25;
    -khtml-opacity: 0.25;
    opacity: 0.25;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=25);
    filter: alpha(opacity=25);
    border-radius: 2rem;
}

@-webkit-keyframes progress {
    from { }

    to { width: 100% }
}

@-moz-keyframes progress {
    from { }

    to { width: 100% }
}

@-ms-keyframes progress {
    from { }

    to { width: 100% }
}

@keyframes progress {
    from { }

    to { width: 100% }
}