Based on css3 cool page loading animation special effects code_html/css_WEB-ITnose

Implement 35 animated SVG icons based on CSS3. This is an SVG icon animation code based on jQuery CSS3. The renderings are as follows:

Online preview Source code download

Implemented code.

html code:

 <div class="loaders">      <div class="loader">        <div class="loader-inner ball-pulse">          <div></div>          <div></div>          <div></div>        </div>      </div>      <div class="loader">        <div class="loader-inner ball-grid-pulse">          <div></div>          <div></div>          <div></div>          <div></div>          <div></div>          <div></div>          <div></div>          <div></div>          <div></div>        </div>      </div>      <div class="loader">        <div class="loader-inner ball-clip-rotate">          <div></div>        </div>      </div>      <div class="loader">        <div class="loader-inner ball-clip-rotate-pulse">          <div></div>          <div></div>        </div>      </div>      <div class="loader">        <div class="loader-inner square-spin">          <div></div>        </div>      </div>      <div class="loader">        <div class="loader-inner ball-clip-rotate-multiple">          <div></div>          <div></div>        </div>      </div>      <div class="loader">        <div class="loader-inner ball-pulse-rise">          <div></div>          <div></div>          <div></div>          <div></div>          <div></div>        </div>      </div>      <div class="loader">        <div class="loader-inner ball-rotate">          <div></div>        </div>      </div>      <div class="loader">        <div class="loader-inner cube-transition">          <div></div>          <div></div>        </div>      </div>      <div class="loader">        <div class="loader-inner ball-zig-zag">          <div></div>          <div></div>        </div>      </div>      <div class="loader">        <div class="loader-inner ball-zig-zag-deflect">          <div></div>          <div></div>        </div>      </div>      <div class="loader">        <div class="loader-inner ball-triangle-path">          <div></div>          <div></div>          <div></div>        </div>      </div>      <div class="loader">        <div class="loader-inner ball-scale">          <div></div>        </div>      </div>      <div class="loader">        <div class="loader-inner line-scale">          <div></div>          <div></div>          <div></div>          <div></div>          <div></div>        </div>      </div>      <div class="loader">        <div class="loader-inner line-scale-party">          <div></div>          <div></div>          <div></div>          <div></div>        </div>      </div>      <div class="loader">        <div class="loader-inner ball-scale-multiple">          <div></div>          <div></div>          <div></div>        </div>      </div>      <div class="loader">        <div class="loader-inner ball-pulse-sync">          <div></div>          <div></div>          <div></div>        </div>      </div>      <div class="loader">        <div class="loader-inner ball-beat">          <div></div>          <div></div>          <div></div>        </div>      </div>      <div class="loader">        <div class="loader-inner line-scale-pulse-out">          <div></div>          <div></div>          <div></div>          <div></div>          <div></div>        </div>      </div>      <div class="loader">        <div class="loader-inner line-scale-pulse-out-rapid">          <div></div>          <div></div>          <div></div>          <div></div>          <div></div>        </div>      </div>      <div class="loader">        <div class="loader-inner ball-scale-ripple">          <div></div>        </div>      </div>      <div class="loader">        <div class="loader-inner ball-scale-ripple-multiple">          <div></div>          <div></div>          <div></div>        </div>      </div>      <div class="loader">        <div class="loader-inner ball-spin-fade-loader">          <div></div>          <div></div>          <div></div>          <div></div>          <div></div>          <div></div>          <div></div>          <div></div>        </div>      </div>      <div class="loader">        <div class="loader-inner line-spin-fade-loader">          <div></div>          <div></div>          <div></div>          <div></div>          <div></div>          <div></div>          <div></div>          <div></div>        </div>      </div>      <div class="loader">        <div class="loader-inner triangle-skew-spin">          <div></div>        </div>      </div>      <div class="loader">        <div class="loader-inner pacman">          <div></div>          <div></div>          <div></div>          <div></div>          <div></div>        </div>      </div>      <div class="loader">        <div class="loader-inner ball-grid-beat">          <div></div>          <div></div>          <div></div>          <div></div>          <div></div>          <div></div>          <div></div>          <div></div>          <div></div>        </div>      </div>      <div class="loader">        <div class="loader-inner semi-circle-spin">          <div></div>        </div>      </div>    </div>

via: http://www.w2bc.com/Article/33625