Ajax Loader
HTML 
 
1
 
2
<!-- Just for fun -->
3
<head>
4
  <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
5
</head>
6
<body>
7
</body>
 
CSS 
body {
1
body {
2
  background: #011310;
3
  overflow: hidden;
4
}
5
.loading-icon {
6
  position: absolute;
7
  vertical-align: middle;
8
  border-radius: 50%;
9
  background: transparent;
10
}
11
.loading-icon::before{
12
  content: "";
13
  position: absolute;
14
  width: 100%;
15
  height: 100%;
16
  border-radius: 50%;
17
  background: #1bc2a6;
18
  animation: bounce 4s infinite;
19
}
20
.loading-icon::after{
21
  content: "";
22
  position: absolute;
23
  opacity: 0;
24
  width: 100%;
25
  height: 100%;
26
  border-radius: 50%;
27
  background: #1bc2a6;
28
  animation: bounce 4s 0.5s infinite;
29
}
30
 
31
@keyframes bounce {
32
  0% {
33
    transform: scale(0);
34
    -webkit-transform: scale(0);
35
    opacity: 1;
36
  }
37
  90% {
38
    transform: scale(2);
39
    -webkit-transform: scale(2);
40
    opacity: 0;
41
  }
42
  100% {
43
    opacity: 0;
44
  }
45
}
46
 
47
@-webkit-keyframes bounce {
48
  0% {
49
    transform: scale(0);
50
    -webkit-transform: scale(0);
51
    opacity: 1;
52
  }
53
  90% {
54
    transform: scale(2);
55
    -webkit-transform: scale(2);
56
    opacity: 0;
57
  }
58
  100% {
59
    opacity: 0;
60
  }
61
}
 
JavaScript 
var W = window.innerWidth;
1
var W = window.innerWidth;
2
var H = window.innerHeight;
3
 
4
// Update new screen size when resize
5
$( window ).resize(function() {
6
  W = window.innerWidth;
7
  H = window.innerHeight;
8
});
9
 
10
var particles = [];
11
 
12
var _config = {
13
  particle_count: 20,
14
  minDelay: 1,
15
  maxDelay: 60,
16
  minDiameter: 10,
17
  maxDiameter: 240,
18
  delayMultiples: 100
19
};
20
 
21
function getRandom(min, max) {
22
  return Math.random() * (max - min) + min;
23
}
24
 
25
function Particle() {
26
  this.id = '';
27
  this.x = function() {
28
    return getRandom(0, W);
29
  };
30
  this.y = function() {
31
    return getRandom(0, H);
32
  };
33
  this.diam = function() {
34
    return getRandom(_config.minDiameter, _config.maxDiameter);
35
  };
36
  this.delay = function() {
37
    return getRandom(_config.minDelay, _config.maxDelay) * _config.delayMultiples;
38
  };
39
}
40
 
41
Particle.prototype.start = function() {
42
  var newPar = this.createNewParticle();
43
  this.addParticle(newPar);
44
  return 1;
45
};
46
 
47
Particle.prototype.createNewParticle = function() {
48
  var newPar = document.createElement('div');
49
    newPar.setAttribute('id', this.id);
50
    newPar.setAttribute('class', 'loading-icon');
51
    newPar.style.width = newPar.style.height = this.diam() + 'px';
52
    newPar.style.left = this.x() + 'px';
53
    newPar.style.top = this.y() + 'px';
54
    return newPar;
55
};
56
 
57
Particle.prototype.addParticle = function(newPar) {
58
  var self = this;
59
    setTimeout(function(){
60
      $('body').append(newPar);
61
      self.move();
62
    }, self.delay());
63
  return 1;
64
};
65
 
66
// Move to new position after 4 seconds
67
// Get new position to update
68
Particle.prototype.move = function() {
69
    var self = this;
70
    var id = this.id;
71
    var newLeft = this.x();
72
    var newTop = this.y();
73
    var newWidth, newHeight;
74
    newWidth = newHeight = this.diam();
75
    setTimeout(function() {
76
      var currentPar = $('#' + id);
77
      currentPar.css({top: newTop, left: newLeft, width: newWidth, height: newHeight});
78
      self.move();
79
    }, 4000);
80
  return 1;
81
};
82
 
83
// Create praticles list
84
for (var i = 0; i < _config.particle_count; i++) {
85
  var particle = new Particle(i);
86
  particles.push(particle);
87
}
88
 
89
particles.forEach(function(particle) {
90
  var id = particles.indexOf(particle);
91
  particle.id = 'particle-' + id;
92
  var delay = particle.delay();
93
  particle.start();
94
});
95
 
96
$(window).focus(function() {
97
  console.log("Focus");
98
});
99
 
100
$(window).blur(function() {
101
  console.log("Blur");
102
  console.log(particles);
103
});
104
 
 

random bounce circles

CSSDeck G+