yjbanov/spark-loading-indicator.html

## spark-loading-indicator.html
<html>
<head>
  <style>
#loading-indicator {
    position: relative;
    height: 3px;
    overflow: hidden;
}

#r0 {
    position: absolute;
    height: 100%;
    width: 200%;
    -webkit-animation-duration: 2s;
    -webkit-animation-name: move;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes move {
    from {
        left: -100%;
    }
    to {
        left: 0;
    }
}

#r1,#r2,#r3,#r4,#r5,#r6,#r7,#r8 {
    height: 100%;
    width: 12.5%;
    float: left;
}

#r1,#r5 { background-color: #166bec; }
#r2,#r6 { background-color: #d94530; }
#r3,#r7 { background-color: #019d5a; }
#r4,#r8 { background-color: #ffba03; }
  </style>
</head>
<body>
  <div style="width: 250px">
    <div id="loading-indicator">
      <div id="r0">
        <div id="r1"></div><div id="r2"></div>
        <div id="r3"></div><div id="r4"></div>
        <div id="r5"></div><div id="r6"></div>
        <div id="r7"></div><div id="r8"></div>
      </div>
    </div>
  </div>
</body>
</html>
	<html>
	<head>
	<style>
	#loading-indicator {
	position: relative;
	height: 3px;
	overflow: hidden;
	}

	#r0 {
	position: absolute;
	height: 100%;
	width: 200%;
	-webkit-animation-duration: 2s;
	-webkit-animation-name: move;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	}

	@-webkit-keyframes move {
	from {
	left: -100%;
	}
	to {
	left: 0;
	}
	}

	#r1,#r2,#r3,#r4,#r5,#r6,#r7,#r8 {
	height: 100%;
	width: 12.5%;
	float: left;
	}

	#r1,#r5 { background-color: #166bec; }
	#r2,#r6 { background-color: #d94530; }
	#r3,#r7 { background-color: #019d5a; }
	#r4,#r8 { background-color: #ffba03; }
	</style>
	</head>
	<body>
	<div style="width: 250px">
	<div id="loading-indicator">
	<div id="r0">
	<div id="r1"></div><div id="r2"></div>
	<div id="r3"></div><div id="r4"></div>
	<div id="r5"></div><div id="r6"></div>
	<div id="r7"></div><div id="r8"></div>
	</div>
	</div>
	</div>
	</body>
	</html>