Ajax Loader
HTML 
<h1>Simple circle firework</h1>
1
<h1>Simple circle firework</h1>
2
<div class = "main">
3
  <div class="cannon"></div>
4
  <div class = "circle"></div>
5
</div>
6
 
7
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 
CSS 
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
1
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
2
* {
3
  font-family: 'Open Sans', sans-serif;
4
}
5
body {
6
  background: #22222D;
7
}
8
h1 {
9
  background: white;
10
  text-align: center;
11
  margin: 30px auto;
12
}
13
.main {
14
  width: 500px;
15
  height: 500px;
16
  margin: 20px auto;
17
  position: relative;
18
}
19
.circle {
20
  position: absolute;
21
  left: 232.5px;
22
  top: 0px;
23
  width: 25px;
24
  height: 25px;
25
  transition: left 0.5s ease, top 1s ease;
26
  border-radius: 50%;
27
}
28
.cannon {
29
  position: absolute;
30
  background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(169,3,41,1)), color-stop(0.44, rgba(143,2,34,1)), to(rgba(109,0,25,1)));
31
  background: -webkit-linear-gradient(left, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
32
  background: -moz-linear-gradient(left, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
33
  background: -o-linear-gradient(left, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
34
  background: linear-gradient(left, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
35
  box-shadow: 0px 0px 5px black;
36
  left: 232.5px;
37
  top: 0px;
38
  width: 20px;
39
  height: 50px;
40
  animation-name: bang_bang;
41
  animation-duration: 0.3s;
42
  animation-timing-function: ease;
43
  animation-iteration-count: infinite;
44
}
45
@keyframes bang_bang {
46
    from {transform: scale(1);}
47
    50% {transform: scale(1.5);}
48
    to {transform: scale(1);}
49
}
 
JavaScript 
var colors = ["#F88431","#F6BA35","#EDD43A","#89DC28", "#FF3399", "   #FF0066"]; // you can add your own colors
1
var colors = ["#F88431","#F6BA35","#EDD43A","#89DC28", "#FF3399", "   #FF0066"]; // you can add your own colors
2
var col_length = colors.length;
3
var number_of_circles = 200; // you can change number of circles;
4
var i = 0;
5
function create_random_line() {
6
  $('.main').append('<div class = "circle"></div>');
7
  if(i<number_of_circles-1)
8
  {
9
    setTimeout(function(){
10
      var getRandomPosX = Math.random() * 475;
11
      var getRandomPosY = Math.random() * (475 - 70) + 70;
12
      var getRandomColor = Math.floor(Math.random() * col_length);
13
      var getRandomScale = Math.random() * (1.8 - 0.5) + 0.5;
14
      var getRandomOpacity = Math.random() * (1 - 0.3) + 0.3;
15
      var getRandomZIndex = Math.floor(Math.random() * 10);
16
      console.log(getRandomZIndex)
17
      $('.circle').eq(i).css({'left': getRandomPosX,
18
                          'top': getRandomPosY,
19
                          'transform': 'scale('+getRandomScale+')',
20
                          'background': colors[getRandomColor],
21
                          'opacity': getRandomOpacity,
22
                          'z-index': getRandomZIndex
23
                         });
24
      create_random_line() }, 30);
25
      i++;
26
    }
27
  else {
28
    $('.cannon').fadeOut(200);
29
    return;
30
  }
31
}
32
 
33
create_random_line();
 

Simple circle firework

CSSDeck G+