seppo0010/example.html

## example.html

<html>
<head>
<style>
* {
  border: 0;
  margin: 0;
  padding: 0;
}
.box {
  border: 1px solid #000;
  height: 500px;
  width: 400px;
}

.box h1 {
  background: #eee;
  font: bold 28px/50px Arial;
  height: 50px;
  text-align: center;
  width: 100%;
}
.loading {
  animation-name: loading-animation;
  animation-duration: 4s;
  background: linear-gradient(to right,  #f00 0%,#f00 0%,#00f 0%,#00f 100%);
  height: 8px;
}

@keyframes loading-animation {
  0% {
    background: linear-gradient(to right,  #f00 0%,#f00 0%,#00f 0%,#00f 100%);
  }
  100% {
    background: linear-gradient(to right,  #f00 0%,#f00 100%,#00f 100%,#00f 100%);
  }
}
</style>
</head>
<body>
<div class="box">
  <h1>Hello</h1>
  <div class="loading">
</div>
</div>
</body>
</html>

	<html>
	<head>
	<style>
	* {
	border: 0;
	margin: 0;
	padding: 0;
	}
	.box {
	border: 1px solid #000;
	height: 500px;
	width: 400px;
	}

	.box h1 {
	background: #eee;
	font: bold 28px/50px Arial;
	height: 50px;
	text-align: center;
	width: 100%;
	}
	.loading {
	animation-name: loading-animation;
	animation-duration: 4s;
	background: linear-gradient(to right, #f00 0%,#f00 0%,#00f 0%,#00f 100%);
	height: 8px;
	}

	@keyframes loading-animation {
	0% {
	background: linear-gradient(to right, #f00 0%,#f00 0%,#00f 0%,#00f 100%);
	}
	100% {
	background: linear-gradient(to right, #f00 0%,#f00 100%,#00f 100%,#00f 100%);
	}
	}
	</style>
	</head>
	<body>
	<div class="box">
	<h1>Hello</h1>
	<div class="loading">
	</div>
	</div>
	</body>
	</html>