Chcę uzyskać taką animację:


Mam taki kod, gdzie każdy layer l1 i tak dalej to jeden pasek z svg. Wiadomo każdy z nich w .load-icon o pozycji relatywnej ma pozycję absolutną odpowiednio ustawioną by układ był jak na gifie. Chcę by kolejno opacity zmieniało się na 0 lub 1 lub po prostu znikało lub się pojawiało.

[HTML] pobierz, plaintext 
<div class="load-icon">
	<div class="layer l1"></div>
	<div class="layer l2"></div>
	<div class="layer l3"></div>
	<div class="layer l4"></div>
	<div class="layer l5"></div>
</div>
[HTML] pobierz, plaintext 

Jest możliwość zrobienia tego w prosty sposób? CSS lub w jQuery? Jakieś pomysły? w jQuery byłoby trochę zabawy choć myślę, by zastosować

[JAVASCRIPT] pobierz, plaintext 
setTimeout(function() {
     $(".layer.l1").show();
     $(".layer.l2").hide();
     $(".layer.l3").hide();
     $(".layer.l4").hide();
     $(".layer.l5").hide();
}, 0);
setTimeout(function() {
     $(".layer.l1").show();
     $(".layer.l2").show();
     $(".layer.l3").hide();
     $(".layer.l4").hide();
     $(".layer.l5").hide();
}, 100);
[JAVASCRIPT] pobierz, plaintext 

i tak do końca animacji a następnie ustawić interwał. Możliwe, że ktoś miał podobny problem i ma jakiś prosty sposób na rozwiązanie?

Już lepiej byłoby użyć animacji CSS niż JS, ale skoro korzystasz z SVG, to użyj wbudowanych animacji:
http://jsfiddle.net/8h06o0xr/