Ajax Loader
HTML 
<!-- CSS -->
1
<!-- CSS -->
2
 <link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css'>
3
<!-- / CSS -->
4
 
5
<canvas id="canvas"></canvas>
6
 
7
 
8
<footer class="source">
9
  Little color composition stikes animation
10
</footer>
11
 
12
<!-- Javascript -->
13
<script src="https://cdn.rawgit.com/Phrogz/context-blender/master/context_blender.js"></script>
14
<!-- / Javascript -->
15
 
 
CSS 
html, body{
1
html, body{
2
  height: 100%;
3
}
4
 
5
body{
6
  font-family: 'Ubuntu Mono';
7
  background-color: #111;
8
  color: #eee;
9
}
10
 
11
footer {
12
  position: absolute;
13
  bottom: 0;
14
  padding: 10px;
15
}
16
 
17
#canvas {
18
  position: fixed;
19
  top: 0;
20
  bottom: 0;
21
  left: 0;
22
  right: 0;
23
24
  z-index: -1;
25
  margin: auto;
26
27
}
28
 
 
JavaScript 
x
97
1
 
2
minScreenSize = (Math.min window.innerWidth, window.innerHeight) / 4
3
w = minScreenSize
4
h = minScreenSize
5
 
6
slice = w / 8
7
 
8
  
9
domCanvas = document.getElementById("canvas")
10
domCanvasCtx = domCanvas.getContext "2d"
11
domCanvas.width = w
12
domCanvas.height = h
13
 
14
 
15
roundRect = (ctx, x, y, width, height, radius, fill, stroke) ->
16
  stroke = true  if typeof stroke is "undefined"
17
  radius = 5  if typeof radius is "undefined"
18
  ctx.beginPath()
19
  ctx.moveTo x + radius, y
20
  ctx.lineTo x + width - radius, y
21
  ctx.quadraticCurveTo x + width, y, x + width, y + radius
22
  ctx.lineTo x + width, y + height - radius
23
  ctx.quadraticCurveTo x + width, y + height, x + width - radius, y + height
24
  ctx.lineTo x + radius, y + height
25
  ctx.quadraticCurveTo x, y + height, x, y + height - radius
26
  ctx.lineTo x, y + radius
27
  ctx.quadraticCurveTo x, y, x + radius, y
28
  ctx.closePath()
29
  ctx.stroke()  if stroke
30
  ctx.fill()  if fill
31
  return
32
 
33
#
34
#
35
#
36
 
37
#
38
#
39
#
40
 
41
class Layer
42
  constructor: (@speed, @color) ->
43
  
44
    @element = document.createElement "canvas"
45
    @element.width  = w
46
    @element.height = h
47
    @ctx = @element.getContext "2d"
48
 
49
  clear: () ->
50
    @element.width = @element.width
51
    @ctx.translate w / 2, h / 2
52
  
53
  draw: (dt) ->
54
    @ctx.fillStyle = @color
55
    @ctx.rotate (dt / 15) * Math.PI / @speed
56
    roundRect @ctx, slice / -2, h / -2, slice, h, slice / 1.7, yes, no
57
  
58
    @ctx.blendOnto domCanvasCtx, 'add'
59
 
60
#
61
#
62
#
63
 
64
#
65
#
66
#
67
 
68
layers = [
69
  new Layer(90, '#00f')
70
  new Layer(60, '#0f0')
71
  new Layer(45, '#f00')
72
]
73
 
74
#
75
#
76
#
77
 
78
#
79
#
80
#
81
 
82
render = (dt)->
83
  domCanvas.width = domCanvas.width
84
85
  for layer in layers
86
    layer.clear()
87
    layer.draw(dt)
88
89
  return
90
 
91
 
92
(animationLoop = (dt) ->
93
  render(dt)
94
  requestAnimationFrame animationLoop
95
  return
96
)()
97
 
 

Little color composition stikes animation

CSSDeck G+