Spinners using Font Icons
Source : http://codepen.io/Keyamoon/pen/aHxuq
Source : http://codepen.io/Keyamoon/pen/aHxuq
<section class="talign-center">
<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>
@font-face {
@font-face {
font-family: 'icomoon';
src:url('http://s3.amazonaws.com/icomoonfonts/4/6/f.eot');
src:url('http://s3.amazonaws.com/icomoonfonts/4/6/f.eot?#iefix') format('embedded-opentype'),
url('http://s3.amazonaws.com/icomoonfonts/4/6/f.woff') format('woff'),
url('http://s3.amazonaws.com/icomoonfonts/4/6/f.ttf') format('truetype'),
url('http://s3.amazonaws.com/icomoonfonts/4/6/f.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
.icon-spinner:before, .icon-spinner-2:before, .icon-spinner-3:before, .icon-spinner-4:before, .icon-spinner-5:before, .icon-spinner-6, .icon-spinner-7:before {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
line-height: 1;
font-smoothing: antialiased;
}
.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;
}