.progress-bar {
    width: 100%;
    position: relative;
    background: white;
    overflow: hidden;
    -webkit-animation: setHeight 1.5s forwards;
    -webkit-animation-fill-mode: both;
    -moz-animation: setHeight 1.5s forwards;
    -moz-animation-fill-mode: both;
}

    .progress-bar span.progress {
        display: block;
        height: 100%;
        background-color: black;
        -webkit-animation: progressBar 1s ease-in-out;
        -webkit-animation-fill-mode: both;
        -moz-animation: progressBar 1s ease-in-out;
        -moz-animation-fill-mode: both;
    }

@-webkit-keyframes progressBar {
    0% {
        width: 0;
    }

    50% {
        width: 30%;
    }

    100% {
        width: 100%;
    }
}

@-moz-keyframes progressBar {
    0% {
        width: 0;
    }

    50% {
        width: 30%;
    }

    100% {
        width: 100%;
    }
}

@-webkit-keyframes setHeight {
    0% {
        height: 5px;
    }

    99% {
        height: 5px;
    }

    100% {
        height: 0;
    }
}

@-moz-keyframes setHeight {
    0% {
        height: 5px;
    }

    99% {
        height: 5px;
    }

    100% {
        height: 0;
    }
}