Indeterminate progress bar

dabblet.css

/**
 * Indeterminate progress bar
 */
@import url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css');

@keyframes push
{
0% {width: 0%;}
50% {width: 70%;}
100% {width: 0%;}
}

.push {
    border-radius: 0.25em;
    animation: push 2s linear infinite;
    height:100%;
    float:left;
}

.progress-bar {
	border-radius:0.25em;
}

.container {
width:300px;
}

dabblet.html

<div class="container">
    <div class="progress progress-striped active">
    	<div class="push"></div>
        <div class="progress-bar progress-bar" style="width: 30%;"></div>
    </div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}