Ajax Loader
×

Spinners using Font Icons

Source : http://codepen.io/Keyamoon/pen/aHxuq

HTML 
<section class="talign-center">
1
<section class="talign-center">
2
  <div class="spinner spinner--steps icon-spinner" aria-hidden="true"></div>
3
  <div class="spinner icon-spinner-2" aria-hidden="true"></div>
4
  <div class="spinner icon-spinner-3" aria-hidden="true"></div>
5
  <div class="spinner icon-spinner-4" aria-hidden="true"></div>
6
  <div class="spinner icon-spinner-5" aria-hidden="true"></div>
7
  <div class="spinner icon-spinner-6" aria-hidden="true"></div>
8
<div class="spinner spinner--steps2 icon-spinner-7" aria-hidden="true"></div>
9
</section>
10
 
11
<footer class="talign-center">
12
  <p><a href="http://icomoon.io">IcoMoon.io</a></p>
13
</footer>
 
CSS 
@font-face {
1
@font-face {
2
  font-family: 'icomoon';
3
  src:url('http://s3.amazonaws.com/icomoonfonts/4/6/f.eot');
4
  src:url('http://s3.amazonaws.com/icomoonfonts/4/6/f.eot?#iefix') format('embedded-opentype'),
5
    url('http://s3.amazonaws.com/icomoonfonts/4/6/f.woff') format('woff'),
6
    url('http://s3.amazonaws.com/icomoonfonts/4/6/f.ttf') format('truetype'),
7
    url('http://s3.amazonaws.com/icomoonfonts/4/6/f.svg#icomoon') format('svg');
8
  font-weight: normal;
9
  font-style: normal;
10
}
11
 
12
 
13
.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 {
14
  font-family: 'icomoon';
15
  speak: none;
16
  font-style: normal;
17
  font-weight: normal;
18
  line-height: 1;
19
  -webkit-font-smoothing: antialiased;
20
}
21
.icon-spinner:before {
22
  content: "\e000";
23
}
24
.icon-spinner-2:before {
25
  content: "\e001";
26
}
27
.icon-spinner-3:before {
28
  content: "\e002";
29
}
30
.icon-spinner-4:before {
31
  content: "\e003";
32
}
33
.icon-spinner-5:before {
34
  content: "\e004";
35
}
36
.icon-spinner-6:before {
37
  content: "\e005";
38
}
39
.icon-spinner-7:before {
40
  content: "\e006";
41
}
42
 
43
@keyframes anim-rotate {
44
  0% {
45
    transform: rotate(0);
46
  }
47
  100% {
48
    transform: rotate(360deg);
49
  }
50
}
51
.spinner {
52
  display: inline-block;
53
  font-size:4em;
54
  height: 1em;
55
  line-height: 1;
56
  margin: .5em;
57
  animation: anim-rotate 2s infinite linear;
58
  color: #fff;
59
  text-shadow: 0 0 .25em rgba(255,255,255, .3);
60
}
61
.spinner--steps {
62
  animation: anim-rotate 1s infinite steps(8);
63
}
64
.spinner--steps2 {
65
  animation: anim-rotate 1s infinite steps(12);
66
}
67
 
68
body {
69
  font-family: sans-serif;
70
  color: #ccc;
71
  line-height: 1.5;
72
  font-size: 1em;
73
  background: #181818;
74
}
75
.talign-center {
76
  text-align: center;
77
}
78
a, a:visited {
79
  text-decoration: none;
80
  color: #444;
81
  text-shadow: 0 1px 2px rgba(0,0,0, .3);
82
  transition: color .3s;
83
}
84
a:hover, a:active {
85
  color: #ccc;
86
}
87
footer {
88
  margin-top: 2em;
89
}
 

Spinners using Font Icons

CSSDeck G+