Ajax Loader
HTML 
<div ng-app="particles">
1
<div ng-app="particles">
2
  <div class="canvas explosion" particle="circle"
3
       count="500" speed="200" size="50" spawn="10"
4
       colors="['#f0fd36', '#f49ff1', '#f53eac', '#76fbfa']" ></div>
5
</div>
6
<script src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js'></script>
7
 
8
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 
CSS 
html {
1
html {
2
  height: 100%;
3
}
4
body {
5
  background:#2C2C44;
6
  overflow:hidden;
7
  height:100%;
8
}
9
.canvas {
10
  width:100%;
11
}
 
JavaScript 
angular.module("particles", [])
1
angular.module("particles", [])
2
    .directive("explosion", ["$interval",
3
        function($interval) {
4
            return {
5
                restrict: "C",
6
                template: "<canvas></canvas",
7
                replace: true,
8
                transclude: true,
9
                scope: {
10
                    particle: "@",
11
                    count: "=",
12
                    speed: "=",
13
                    size: "=",
14
                    colors: "=",
15
                    spawn: "="
16
                },
17
                link: function(scope, element, attrs) {
18
                    console.log("Starting canvas ", scope.particle);
19
                    var ctx = element[0].getContext('2d');
20
                    var particles = [];
21
                    var width, height;
22
                    var maxCount = scope.count || 100;
23
                    var maxSpeed = scope.speed || 150;
24
                    var maxSize = scope.size || 10;
25
                    var colors = scope.colors || ['#f00'];
26
                    var spawnTime = scope.spawn ? 1000 / scope.spawn : 10;
27
                    var resize = function() {
28
                        element.attr({
29
                            width: $('body').width(),
30
                            height: $('body').height()
31
                        });
32
 
33
                        width = element.attr('width');
34
                        height = element.attr('height');
35
 
36
                        console.log("Size ", width, "x", height);
37
                    };
38
                    var spawn = function() {
39
                        particles.push({
40
                            x: width / 2,
41
                            y: height / 2,
42
                            v: {
43
                                x: (maxSpeed << 1) * Math.random() - maxSpeed,
44
                                y: (maxSpeed << 1) * Math.random() - maxSpeed
45
                            },
46
                            s: Math.random() * maxSize,
47
                            a: 1,
48
                            c: colors[Math.floor(Math.random() * colors.length)]
49
                        });
50
                    };
51
                    var draw = function() {
52
                        ctx.clearRect(0, 0, width, height);
53
                        for (var i = 0; i < particles.length; i++) {
54
                            var p = particles[i];
55
                            ctx.globalAlpha = p.a;
56
                            ctx.fillStyle = p.c;
57
                            ctx.beginPath();
58
                            ctx.arc(p.x, p.y, p.s, 0, 2 * Math.PI);
59
                            ctx.fill();
60
                        }
61
                    };
62
                    var lastSpawned = 0;
63
                    var update = function(delta) {
64
 
65
                        lastSpawned += delta;
66
                        while (lastSpawned > spawnTime) {
67
                            lastSpawned -= spawnTime;
68
                            spawn();
69
                        }
70
                        var particleOverflow = particles.length - maxCount;
71
                        if (particleOverflow > 0) {
72
                            particles.splice(0, particleOverflow);
73
                        }
74
 
75
                        for (var i = 0; i < particles.length; i++) {
76
                            var p = particles[i];
77
                            p.x += p.v.x * delta / 1000;
78
                            p.y += p.v.y * delta / 1000;
79
                            p.a *= 0.99;
80
                        }
81
                    };
82
                    var finished = false;
83
                    var time;
84
                    var animate = function(elapsed) {
85
                        if (!time)
86
                            time = elapsed;
87
 
88
                        var delta = elapsed - time;
89
                        time = elapsed;
90
                        update(delta);
91
                        draw();
92
 
93
                        if (!finished) window.requestAnimationFrame(animate);
94
                    };
95
 
96
                    resize();
97
                    $(window).on('resize', resize);
98
                    window.requestAnimationFrame(animate);
99
                    scope.$on("$destroy", function() {
100
                        finished = true;
101
                    });
102
                }
103
            };
104
        }
105
    ]);
 

Angular Particles

CSSDeck G+