Ajax Loader
HTML 
mixin divs(n)
1
mixin divs(n)
2
  - var i = 0
3
      while i < n
4
        div
5
        - i++
6
 
7
.flex-preserve.box-4
8
  +divs(100)
9
.flex-preserve.box-3
10
  +divs(50)
11
.flex-preserve.box-2
12
  +divs(10)
13
.flex-preserve
14
  +divs(6)
 
CSS 
body,
1
body,
2
html
3
  margin 0
4
  padding 0
5
  width 100%
6
  height 100%
7
 
8
base-c = #e91e63
9
ideg = 90
10
 
11
.flex-preserve
12
  display flex
13
  height 25%
14
  perspective 50px
15
  transform-style preserve-3d
16
  width 600px
17
  &>div
18
    align-items center
19
    animation i3d 1s linear infinite alternate
20
    background-color spin(base-c,1 * ideg)
21
    height 55px
22
    justify-content space-around
23
    margin auto
24
    transition transform .2s ease-in-out
25
    width 55px
26
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
27
.box-2
28
  &>div
29
    background-color spin(base-c,2 * ideg)
30
    width 20px
31
  for row in 1 .. 10
32
    div:nth-child({row})
33
      animation-delay unquote(''+(row * 50) +'ms')
34
@keyframes i3d
35
  to
36
    transform translate3d(0,0,-200px) scale3d(5,5,5)
37
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
38
.box-3
39
  perspective 200px
40
  &>div
41
    animation-name is-3d-2
42
    background-color spin(base-c,3 * ideg)
43
    height 50px
44
    width 5px
45
  for row in 1 .. 50
46
    div:nth-child({row})
47
      animation-delay unquote(''+(row * 50) +'ms')
48
 
49
@keyframes is-3d-2
50
  to
51
    transform translate3d(0,0,-100px) scale3d(0,0,0)
52
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
53
.box-4
54
  &>div
55
    animation-name is-3d-3
56
    animation-timing-function ease-in
57
    background-color spin(base-c,4 * ideg)
58
  for row in 1 .. 100
59
    div:nth-child({row})
60
      animation-delay unquote(''+(row * 10) +'ms')
61
 
62
@keyframes is-3d-3
63
  to
64
    transform rotate3d(0,0,1,(360deg * 5)) translate3d(0px,333px,-250px)
65
 
 

CSS3 3D Animation,transform loaders

CSSDeck G+