CodePen

HTML

            
              <section class="talign-center">
	<div class="spinner spinner--steps icon-spinner" aria-hidden="true"></div>
	<div class="spinner icon-spinner-2" aria-hidden="true"></div>
	<div class="spinner icon-spinner-3" aria-hidden="true"></div>
	<div class="spinner icon-spinner-4" aria-hidden="true"></div>
	<div class="spinner icon-spinner-5" aria-hidden="true"></div>
	<div class="spinner icon-spinner-6" aria-hidden="true"></div>
<div class="spinner spinner--steps2 icon-spinner-7" aria-hidden="true"></div>
</section>

<footer class="talign-center">
	<p><a href="http://icomoon.io">IcoMoon.io</a></p>
</footer>
            
          
!

CSS

            
              @font-face {
	font-family: 'icomoon';
	src:url('http://s3.amazonaws.com/icomoon.io/4/Loading/icomoon.eot?-9haulc');
	src:url('http://s3.amazonaws.com/icomoon.io/4/Loading/icomoon.eot?#iefix-9haulc') format('embedded-opentype'),
		url('http://s3.amazonaws.com/icomoon.io/4/Loading/icomoon.woff?-9haulc') format('woff'),
		url('http://s3.amazonaws.com/icomoon.io/4/Loading/icomoon.ttf?-9haulc') format('truetype'),
		url('http://s3.amazonaws.com/icomoon.io/4/Loading/icomoon.svg?-9haulc#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-spinner:before {
	content: "\e000";
}
.icon-spinner-2:before {
	content: "\e001";
}
.icon-spinner-3:before {
	content: "\e002";
}
.icon-spinner-4:before {
	content: "\e003";
}
.icon-spinner-5:before {
	content: "\e004";
}
.icon-spinner-6:before {
	content: "\e005";
}
.icon-spinner-7:before {
	content: "\e006";
}

@keyframes anim-rotate {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}
.spinner {
	display: inline-block;
	font-size:4em;
	height: 1em;
	line-height: 1;
	margin: .5em;
	animation: anim-rotate 2s infinite linear;
	color: #fff;
	text-shadow: 0 0 .25em rgba(255,255,255, .3);
}
.spinner--steps {
	animation: anim-rotate 1s infinite steps(8);
}
.spinner--steps2 {
	animation: anim-rotate 1s infinite steps(12);
}

body {
	font-family: sans-serif;
	color: #ccc;
	line-height: 1.5;
	font-size: 1em;
	background: #181818;
}
.talign-center {
	text-align: center;
}
a, a:visited {
	text-decoration: none;
	color: #444;
	text-shadow: 0 1px 2px rgba(0,0,0, .3);
	transition: color .3s;
}
a:hover, a:active {
	color: #ccc;
}
footer {
	margin-top: 2em;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................