css striped animated progress bar

gistfile1.css

<style>
	.progress-bar {
		padding: 5px;
		height : 20px;
	}

	.progress-bar > span {
		height            : 100%;
		display           : block;
		overflow          : hidden;
		position          : relative;
		background-color  : #0080C5;
		transition        : 500ms linear;
		-webkit-transition: 500ms linear;
	}

	.progress-bar > span:after {
		content          : "";
		top              : 0;
		left             : 0;
		right            : 0;
		bottom           : 0;
		z-index          : 1;
		position         : absolute;
		background-size  : 50px 50px;
		overflow         : hidden;
		animation        : stripes-move 1s linear infinite;
		-webkit-animation: stripes-move 1s linear infinite;
		background-image : -webkit-linear-gradient(135deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
		background-image : linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
	}

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

	@keyframes stripes-move {
		0% {
			background-position: 0 0;
		}
		100% {
			background-position: 50px 50px;
		}
	}

	.progress-bar > span:after {
		-webkit-animation: stripes-move 2s linear infinite;
		animation        : stripes-move 2s linear infinite;
	}
</style>

<div class="progress-bar">
    <span style="width: 25%"></span>
</div>