loading

by Paco86

HTML

<div class="container">
    <h1>This page takes forever to load.</h1>
	<div class="loder"></div>
</div>

CSS

html {
  background: #ecf0f1;
}

body, h1, h2 {
  font-family: Helvetica, Sans-serif; 
  color: #2c3e50;
  margin:0; 
  padding:0; 
  font-weight:300;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 36px;
  opacity: 0;
  animation: appear 1s 3s forwards;
}

.container{
  margin:4em;
  text-align: center;
}

.loder{
	border: 16px solid #bdc3c7;
	margin: auto;
	width: 100px;
	height: 100px;
	border-top-color: #1abc9c;
	border-bottom-color: #349adb;
	border-radius: 50%;
	animation-name: spin;
	animation-duration: 3s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;

}

@keyframes spin{
	0%{
		transform: rotate(0deg) scale(1);
	}
	
	50%{
		transform: rotate(360deg) scale(1.1);
	}
	
	100%{
		transform: rotate(720deg) scale(1);
	}
}