Animated Pure CSS Progress Bar

This code sample will allow you to include an animated progress bar just by using CSS. This makes it extremely lightweight and performant, you only need to update the percentage completed with one line of JavaScript.

HTML
<div class="progress-bar"><span></span></div>

CSS
.progress-bar {
    height: 20px;
    position: relative;
    margin: 20px;
    padding: 2px;
    background: #555;
    border-radius: 25px;
    box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}

.progress-bar > span {
    display: block;
    height: 16px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: rgb(43, 194, 83);
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(43, 194, 83)), color-stop(1, rgb(84, 240, 84)));
    box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}

.progress-bar > span:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
    z-index: 1;
    background-size: 50px 50px;
    -webkit-animation: progressBarMove 2s linear infinite;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    overflow: hidden;
    -webkit-transition: all .5s;
}

@-webkit-keyframes progressBarMove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}

Directions:
- to set progress value use document.querySelector(".progress-bar span").style.width="50%"

Note:
As a bonus, there is a background animation for the progress bar.
This snippet focuses on iOS development. Make sure to verify/adapt any vendor prefixes.

Back to main listing.

Back to Blog