<section class="wrap">

  <h1>CSS Animation - Spinners & Loaders</h1>
  <div class="spinner spinner-A"></div>
	<div class="spinner spinner-B"></div>
  

	
	
</section>
@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700'

body
	background: white

.wrap
	font-family: 'Roboto', sans-serif
	text-align: center
	vertical-align: middle
	
	h1
		color: #7F8C8D
	
.spinner
	background: #eee
	width: 200px
	height: 200px
	border-radius: 50%
	margin: 50px
	display: inline-block
	position: relative

	&:after, &:before
		content: ''
		display: block
		width: 200px
		height: 200px
		border-radius: 50%
		
	
	
.spinner-A:after
	border: 4px solid transparent
	position: absolute
	top: -4px
	left: -4px
	border-top-color: red
	border-bottom-color: red
	animation: spinny 1s linear infinite
	
	@keyframes spinny
		0%
			transform: rotate(0deg) scale(1)
		50%
			transform: rotate(45deg) scale(1.2)
		100%
			transform: rotate(360deg) scale(1)
	
	


.spinner-B
	&:before,	&:after
	
		position: absolute
		background: red
		animation: pulse 3s linear infinite
		opacity: 0
		
	&:after
		animation: pulse 2s linear 2.3s infinite
	
	@keyframes pulse
		0%
			transform: scale(0)
			opacity: 1
		100%
			transform: scale(1.2)
			opacity: 0
	
	



  

  

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.