Code for loading animation effects based on css3 cool pages, css3 cool

Code for loading animation effects based on css3 cool pages, css3 cool

Implement 35 animated SVG icons Based on CSS3. This is an SVG icon animation code based on jQuery + CSS3. As follows:

Download Online Preview source code

Implementation 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