This is one of my favorite things about SVG: if you know a little bit of web development, you can animate SVG graphics as though they were any other part of a website. And all of that magic code can be contained within the SVG file itself. So you could have a little 6 kilobyte icon that comes to life as though it were a video.
SVGs can be responsive, changing in various ways depending on the screen size or pixel density, or tons of other factors. The possibilities are vast, and they really redefine how we think about what a single graphic can be.
Style 1
<div class="loader loader--style1" title="0">
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path opacity="0.2" fill="#FF6700" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
<path fill="#FF6700" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
C22.32,8.481,24.301,9.057,26.013,10.047z">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 20 20"
to="360 20 20"
dur="0.5s"
repeatCount="indefinite"/>
</path>
</svg>
</div>
Style 2
<div class="loader loader--style2" title="1">
<svg height="40px" id="loader-1" style="enable-background: new 0 0 50 50;" version="1.1" viewbox="0 0 50 50" width="40px" x="0px" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px">
<path d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" fill="#08adf2">
<animatetransform attributename="transform" attributetype="xml" dur="0.6s" from="0 25 25" repeatcount="indefinite" to="360 25 25" type="rotate">
</animatetransform></path>
</svg>
</div>
Style 3
<div class="loader loader--style3" title="2">
<svg height="40px" id="loader-1" style="enable-background: new 0 0 50 50;" version="1.1" viewbox="0 0 50 50" width="40px" x="0px" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px">
<path d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" fill="#8cb303">
<animatetransform attributename="transform" attributetype="xml" dur="0.6s" from="0 25 25" repeatcount="indefinite" to="360 25 25" type="rotate">
</animatetransform></path>
</svg>
</div>
Style 4
<div class="loader loader--style4" title="3">
<svg height="24px" id="Layer_1" style="enable-background: new 0 0 50 50;" version="1.1" viewbox="0 0 24 24" width="24px" x="0px" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px">
<rect fill="#f20808" height="7" width="4" x="0" y="0">
<animatetransform attributename="transform" attributetype="xml" begin="0s" dur="0.6s" repeatcount="indefinite" type="scale" values="1,1; 1,3; 1,1">
</animatetransform></rect>
<rect fill="#f20808" height="7" width="4" x="10" y="0">
<animatetransform attributename="transform" attributetype="xml" begin="0.2s" dur="0.6s" repeatcount="indefinite" type="scale" values="1,1; 1,3; 1,1">
</animatetransform></rect>
<rect fill="#f20808" height="7" width="4" x="20" y="0">
<animatetransform attributename="transform" attributetype="xml" begin="0.4s" dur="0.6s" repeatcount="indefinite" type="scale" values="1,1; 1,3; 1,1">
</animatetransform></rect>
</svg>
</div>
Style 5
<div class="loader loader--style5" title="4">
<svg height="30px" id="Layer_1" style="enable-background: new 0 0 50 50;" version="1.1" viewbox="0 0 24 30" width="24px" x="0px" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px">
<rect fill="#9108f2" height="10" width="4" x="0" y="0">
<animatetransform attributename="transform" attributetype="xml" begin="0" dur="0.6s" repeatcount="indefinite" type="translate" values="0 0; 0 20; 0 0">
</animatetransform></rect>
<rect fill="#9108f2" height="10" width="4" x="10" y="0">
<animatetransform attributename="transform" attributetype="xml" begin="0.2s" dur="0.6s" repeatcount="indefinite" type="translate" values="0 0; 0 20; 0 0">
</animatetransform></rect>
<rect fill="#9108f2" height="10" width="4" x="20" y="0">
<animatetransform attributename="transform" attributetype="xml" begin="0.4s" dur="0.6s" repeatcount="indefinite" type="translate" values="0 0; 0 20; 0 0">
</animatetransform></rect>
</svg>
</div>
Style 6
<div class="loader loader--style6" title="5">
<svg height="30px" id="Layer_1" style="enable-background: new 0 0 50 50;" version="1.1" viewbox="0 0 24 30" width="24px" x="0px" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px">
<rect fill="#f29808" height="5" width="4" x="0" y="13">
<animate attributename="height" attributetype="XML" begin="0s" dur="0.6s" repeatcount="indefinite" values="5;21;5">
<animate attributename="y" attributetype="XML" begin="0s" dur="0.6s" repeatcount="indefinite" values="13; 5; 13">
</animate></animate></rect>
<rect fill="#f29808" height="5" width="4" x="10" y="13">
<animate attributename="height" attributetype="XML" begin="0.15s" dur="0.6s" repeatcount="indefinite" values="5;21;5">
<animate attributename="y" attributetype="XML" begin="0.15s" dur="0.6s" repeatcount="indefinite" values="13; 5; 13">
</animate></animate></rect>
<rect fill="#f29808" height="5" width="4" x="20" y="13">
<animate attributename="height" attributetype="XML" begin="0.3s" dur="0.6s" repeatcount="indefinite" values="5;21;5">
<animate attributename="y" attributetype="XML" begin="0.3s" dur="0.6s" repeatcount="indefinite" values="13; 5; 13">
</animate></animate></rect>
</svg>
</div>
Style 7
<div class="loader loader--style7" title="6">
<svg height="30px" id="Layer_1" style="enable-background: new 0 0 50 50;" version="1.1" viewbox="0 0 24 30" width="24px" x="0px" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px">
<rect fill="#38b7a7" height="20" width="4" x="0" y="0">
<animate attributename="opacity" attributetype="XML" begin="0s" dur="0.6s" repeatcount="indefinite" values="1; .2; 1">
</animate></rect>
<rect fill="#38b7a7" height="20" width="4" x="7" y="0">
<animate attributename="opacity" attributetype="XML" begin="0.2s" dur="0.6s" repeatcount="indefinite" values="1; .2; 1">
</animate></rect>
<rect fill="#38b7a7" height="20" width="4" x="14" y="0">
<animate attributename="opacity" attributetype="XML" begin="0.4s" dur="0.6s" repeatcount="indefinite" values="1; .2; 1">
</animate></rect>
</svg>
</div>
Style 8
<div class="loader loader--style8" title="7">
<svg height="30px" id="Layer_1" style="enable-background: new 0 0 50 50;" version="1.1" viewbox="0 0 24 30" width="24px" x="0px" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px">
<rect fill="#333" height="10" opacity="0.2" width="4" x="0" y="10">
<animate attributename="opacity" attributetype="XML" begin="0s" dur="0.6s" repeatcount="indefinite" values="0.2; 1; .2">
<animate attributename="height" attributetype="XML" begin="0s" dur="0.6s" repeatcount="indefinite" values="10; 20; 10">
<animate attributename="y" attributetype="XML" begin="0s" dur="0.6s" repeatcount="indefinite" values="10; 5; 10">
</animate></animate></animate></rect>
<rect fill="#333" height="10" opacity="0.2" width="4" x="8" y="10">
<animate attributename="opacity" attributetype="XML" begin="0.15s" dur="0.6s" repeatcount="indefinite" values="0.2; 1; .2">
<animate attributename="height" attributetype="XML" begin="0.15s" dur="0.6s" repeatcount="indefinite" values="10; 20; 10">
<animate attributename="y" attributetype="XML" begin="0.15s" dur="0.6s" repeatcount="indefinite" values="10; 5; 10">
</animate></animate></animate></rect>
<rect fill="#333" height="10" opacity="0.2" width="4" x="16" y="10">
<animate attributename="opacity" attributetype="XML" begin="0.3s" dur="0.6s" repeatcount="indefinite" values="0.2; 1; .2">
<animate attributename="height" attributetype="XML" begin="0.3s" dur="0.6s" repeatcount="indefinite" values="10; 20; 10">
<animate attributename="y" attributetype="XML" begin="0.3s" dur="0.6s" repeatcount="indefinite" values="10; 5; 10">
</animate></animate></animate></rect>
</svg>
</div>
Leave your comment
Post a Comment