Ajax Loader
HTML 
.warp
1
.warp
2
  span.num(style="animation-play-state:paused;-webkit-animation-play-state:paused", data-num="5") 5
 
CSS 
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300)
1
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300)
2
body
3
html
4
  height 100%
5
  width 100%
6
  overflow hidden
7
  background #5A37BC
8
.warp
9
  display flex
10
  height 100%
11
  transform-style preserve-3d
12
  perspective 500px
13
  .num
14
    margin auto
15
    font bold 20em 'Oswald', sans-serif
16
    text-align center
17
    color white
18
    position relative
19
    z-index 3
20
    animation rotate 1s ease-in-out infinite
21
    &:after,
22
    &:before
23
      content: attr(data-num);
24
      position absolute
25
      left 0
26
      top 0
27
      animation ABrotate 1s ease-in-out .7s infinite
28
    &:after
29
      color #fff700
30
      z-index -2
31
    &:before
32
      color #d601ee
33
      z-index -1
34
      animation-delay .6s
35
      text-shadow -10px -3px #4C31A5
36
 
37
@keyframes ABrotate
38
  0%
39
    transform rotate(0)
40
  50%
41
    transform rotate(30deg)
42
  100%
43
    transform rotate(0)
44
@keyframes rotate
45
  100%
46
    transform rotate3d(0, -1, -1, 360deg)
47
 
 
JavaScript 
counter = 6;
1
counter = 6;
2
cached = document.querySelector '.num'
3
 
4
setTimeout ->
5
  cached.style.animationPlayState = "running"
6
  cached.style.WebkitAnimationPlayState = "running"
7
,500
8
 
9
setInterval ->
10
  cached.innerHTML = counter
11
  cached.dataset.num = counter
12
  counter+=1
13
,1000
 

CSS3 transform timer. animated

CSSDeck G+