CSS Progress Meter

Created to answer a question on Stack Overflow

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Progress Bar</title>
</head>
<body>
    <input type="checkbox" value="Install" /> Start Installation:
    <div class="progress-bar">
        <div class="progress-color"></div>
    </div>
    <script
</body>
</html>
<!--
Simply check/uncheck the checkbox to kick off the animation.  I've set it to 3 seconds.
-->

CSS

.progress-bar {
    margin: 5px;
    width: 500px;
    background-color: #DDD;
    overflow: hidden;
    border: 1px solid #BBB;
    -webkit-border-radius: 15px;
       -moz-border-radius: 15px;
            border-radius: 15px;
}
.progress-color {
    background-color: lime;
    background-size: 40px 40px;
    width: 0%;
    height: 30px;
    width: 100%;
    -webkit-transition: width 2s ease;
       -moz-transition: width 2s ease;
        -ms-transition: width 2s ease;
         -o-transition: width 2s ease;
            transition: width 2s ease;
    -webkit-animation: bganim 3s linear 2s infinite;
       -moz-animation: bganim 3s linear 2s infinite;
        -ms-animation: bganim 3s linear 2s infinite;
         -o-animation: bganim 3s linear 2s infinite;
            animation: bganim 3s linear 2s infinite;
}

:checked + .progress-bar .progress-color{
    
}