Hello friends here I came again to share with you few Beautiful SVG Loader and Spinner Animation using css3. You can use this loader and spinner as your website preloader or image lazy loader to make it loading effective and attractive so that user cant bore if your website loading slow or having lots of data to load.
As in my previous post I have shared two amazing idea to Create Ripple Effect Using jQuery and Css3 and Ultimate Icon Hover Effect using css3 that made our visitors mind blow hope fully you will like it too.
Now coming back to svg loader, as above publish post here too I am going to use css3 advance properties to make svg animation by animation and transition properties. By using these animated svg loader you can make your website and application worthy.
Loaders /spinner icons are the part of almost every website and web application to make their flow easy and smooth. Specially you need it whenever you want to involves Ajax request with your web application. These loading indicators specially used in it. I this round up I would like to present my users some of loading spinner /loader to use it with their dynamic content like AJAX loader, image/content lazy loading indicator, image preloader and much more.
How to Create Beautiful SVG Loader and Spinner Animation using css3:
HTML Structure : Pick Your Favorite SVG loader from given below Loaders
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<ul> <li> <img src="svg-loaders/audio.svg" width="40" alt=""> </li> <li> <img src="svg-loaders/rings.svg" width="60" alt=""> </li> <li> <img src="svg-loaders/grid.svg" width="40" alt=""> </li> <li> <img src="svg-loaders/hearts.svg" width="80" alt=""> </li> <li> <img src="svg-loaders/oval.svg" width="50" alt=""> </li> <li> <img src="svg-loaders/three-dots.svg" width="60" alt=""> </li> <li> <img src="svg-loaders/spinning-circles.svg" width="50" alt=""> </li> <li> <img src="svg-loaders/puff.svg" width="50" alt=""> </li> <li> <img src="svg-loaders/circles.svg" width="50" alt=""> </li> <li> <img src="svg-loaders/tail-spin.svg" width="50" alt=""> </li> <li> <img src="svg-loaders/bars.svg" width="40" alt=""> </li> <li> <img src="svg-loaders/ball-triangle.svg" width="50" alt=""> </li> <div style="clear: both"></div> </ul> |
Animated SVG Code For Audio(One of the Loaders serving as exmaple for all download code):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL --> <svg width="55" height="80" viewBox="0 0 55 80" xmlns="http://www.w3.org/2000/svg" fill="#FFF"> <g transform="matrix(1 0 0 -1 0 80)"> <rect width="10" height="20" rx="3"> <animate attributeName="height" begin="0s" dur="4.3s" values="20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20" calcMode="linear" repeatCount="indefinite" /> </rect> <rect x="15" width="10" height="80" rx="3"> <animate attributeName="height" begin="0s" dur="2s" values="80;55;33;5;75;23;73;33;12;14;60;80" calcMode="linear" repeatCount="indefinite" /> </rect> <rect x="30" width="10" height="50" rx="3"> <animate attributeName="height" begin="0s" dur="1.4s" values="50;34;78;23;56;23;34;76;80;54;21;50" calcMode="linear" repeatCount="indefinite" /> </rect> <rect x="45" width="10" height="30" rx="3"> <animate attributeName="height" begin="0s" dur="2s" values="30;45;13;80;56;72;45;76;34;23;67;30" calcMode="linear" repeatCount="indefinite" /> </rect> </g> </svg> |