circle spinner in css3

circle-spinner.html

<div class="spinner">
	<div class="top"></div>
	<div class="bottom"></div>
</div>


<h4>Loader #4</h4>

<style>
	.spinner {
		width: 70px;
		height: 70px;
		position: relative;
		left: 100px;
		top: 100px;
		color: white;
	}

	.spinner .top, .spinner .bottom{
		width: 70px;
		height: 35px;
		position: relative;
		overflow: hidden;
	}

	.spinner .top::before, .spinner .bottom::before{
		content: '';
		width: 70px;
		height: 70px;
		display: inline-block;
		border-style: solid;
		border-top-color: #FFF;
		border-right-color: #FFF;
		border-left-color: transparent;
		border-bottom-color: transparent;
		border-radius: 50%;
		box-sizing: border-box;
	}

	.spinner .top::before {
		transform: rotate(-225deg);
		-webkit-animation: rotate-top 3s ease-in infinite;
	}

	.spinner .bottom::before {
		border-bottom-color: #fff;
		border-top-color: transparent;
		position: relative;
		bottom: 35px;
		transform: rotate(-135deg);
		-webkit-animation: rotate-bottom 3s  ease-out infinite;
	}


	@-webkit-keyframes rotate-top {
		0% { border-width: 3px; }
	  	25% { border-width: 3px; }
		50% { 
			transform: rotate(-45deg); 
		}
		75% { border-width: 3px;}
		100% { border-width: 3px;
			transform: rotate(-45deg); 
		}
	}

	@-webkit-keyframes rotate-bottom {
		0% { border-width: 3px; }
	  	25% { border-width: 3px; }
		50% { 
			transform: rotate(-135deg);
		}
		75% { border-width: 3px;}
		100% {  
			transform: rotate(45deg); 
		}
	}
	
	body {
	  background: rgb(235, 205, 86);
	}
	h4 {
	  position: absolute;
	  bottom: 20px;
	  left: 20px;
	  margin: 0;
	  font-weight: 200;
	  opacity: .5;
		font-family: sans-serif;
	  color: #fff;
	}
</style>