Ajax Loader
HTML 
<figure class="icons">
1
<figure class="icons">
2
  <canvas id="clear-day" width="64" height="64"></canvas>
3
  <canvas id="clear-night" width="64" height="64"></canvas>
4
  <canvas id="partly-cloudy-day" width="64" height="64"></canvas>
5
  <canvas id="partly-cloudy-night" width="64" height="64"></canvas>
6
  <canvas id="cloudy" width="64" height="64"></canvas>
7
  <canvas id="rain" width="64" height="64"></canvas>
8
  <canvas id="sleet" width="64" height="64"></canvas>
9
  <canvas id="snow" width="64" height="64"></canvas>
10
  <canvas id="wind" width="64" height="64"></canvas>
11
  <canvas id="fog" width="64" height="64"></canvas>
12
</figure>
13
 
14
<script src="https://rawgithub.com/darkskyapp/skycons/master/skycons.js"></script>
 
CSS 
body {
1
body {
2
  background: black;
3
}
4
 
5
figure {
6
  margin: 5em auto;
7
  width: 350px;
8
  height: 150px;
9
}
 
JavaScript 
var icons = new Skycons({"color":"white"}),
1
var icons = new Skycons({"color":"white"}),
2
    list = [
3
      "clear-day",
4
      "clear-night",
5
      "partly-cloudy-day",
6
      "partly-cloudy-night",
7
      "cloudy",
8
      "rain",
9
      "sleet",
10
      "snow",
11
      "wind",
12
      "fog"
13
     ],
14
    i;
15
 
16
for(i = list.length; i--;)
17
  icons.set(list[i], list[i]);
18
 
19
icons.play();
 

Ten Animated Weather Glyphs (Skycons)

CSSDeck G+