Giacomo Balli profile picture
Giacomo Balli
The Mobile Guy

Over two decades of experience at your service.
I help business owners make better decisions.

Free 20-Minute Consultation LinkedIn

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.

Published: Sun, Jan 10 2016 @ 18:56:40
Back to Blog