Awesome light weighted animated Attractive loader spinner Morphing using CSS, HTML and anime-js. Demo and Download the zip (*.zip).
Beautiful loader spinner Morphing code below
HTML Snippet
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"> <path style="stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 60.235377,27.520871 c 0.189709,-4.769238 4.376076,-8.334385 9.113829,-8.309677 4.737756,0.02402 8.838134,4.478627 8.845775,9.381884 0.0075,4.903255 -4.714971,9.003123 -9.515911,8.845809 -4.800935,-0.157316 -8.633405,-5.148778 -8.443693,-9.918016 z" id="c1"/> <path id="c2" d="m 41.924633,20.543034 c 0.166483,-4.185347 3.840319,-7.314018 7.998036,-7.292335 4.157719,0.02108 7.756094,3.930315 7.762799,8.233273 0.0066,4.302957 -4.137724,7.900884 -8.350891,7.762829 -4.213164,-0.138056 -7.57643,-4.51842 -7.409944,-8.703767 z" style="stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> <path style="stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 23.075646,29.229342 c 0.146044,-3.671523 3.368853,-6.416095 7.016138,-6.397074 3.647286,0.01849 6.803898,3.4478 6.80978,7.222495 0.0058,3.774695 -3.629746,6.930913 -7.325674,6.809807 -3.695925,-0.121107 -6.646291,-3.963705 -6.500244,-7.635228 z" id="c3"/> <path style="stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 15.379508,51.528971 c 0.125101,-3.144705 2.885466,-5.495467 6.009413,-5.479172 3.123947,0.01584 5.827625,2.953082 5.832663,6.186157 0.005,3.233076 -3.108923,5.936417 -6.274532,5.832686 -3.165608,-0.103728 -5.692635,-3.394963 -5.567544,-6.539671 z" id="c4"/> <path id="c5" d="m 34.81651,72.754234 c -0.105589,2.654237 -2.43543,4.638359 -5.072146,4.624605 -2.636716,-0.01337 -4.918711,-2.4925 -4.922963,-5.221324 -0.0042,-2.728825 2.624035,-5.010535 5.295915,-4.922983 2.67188,0.08755 4.804775,2.865463 4.699194,5.519702 z" style="stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> <path style="stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 54.833208,79.967124 c -0.08422,2.117058 -1.942534,3.699621 -4.045616,3.688652 -2.103083,-0.01066 -3.923234,-1.988054 -3.926626,-4.164602 -0.0033,-2.17655 2.092968,-3.996475 4.224098,-3.926643 2.131129,0.06983 3.832356,2.285535 3.748144,4.402593 z" id="c6" /> <path id="c7" d="m 72.393149,72.828376 c -0.06319,1.58858 -1.457622,2.77609 -3.035715,2.76786 -1.578093,-0.008 -2.943883,-1.49178 -2.946428,-3.125 -0.0025,-1.63322 1.570504,-2.99884 3.169643,-2.94644 1.599138,0.0524 2.875691,1.715 2.8125,3.30358 z" style="stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> <path id="c8" d="m 86.874374,51.182459 c -0.208103,5.231655 -4.800373,9.142474 -9.997492,9.115371 -5.197122,-0.02635 -9.695066,-4.912868 -9.703448,-10.291538 -0.0083,-5.378667 5.172127,-9.876052 10.43856,-9.703485 5.266426,0.172569 9.470486,5.647995 9.26238,10.879652 z" style="stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> </svg>
CSS Snippet
body { margin: 0; } svg { display: block; fill: #2095F2; margin: 0 auto; animation: rotate 2000ms infinite linear; margin-top: 50px; } path { fill: #00B39F; } #c8 { fill: #555; } #c1 { fill: #666; } #c2 { fill: #777; } #c3 { fill: #888; } #c4 { fill: #999; } #c5 { fill: #aaa; } #c6 { fill: #bbb; } #c7 { fill: #ccc; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }JavaScript Snippet
var timeline = anime.timeline({ autoplay: true, direction: "alternate", loop: true }); timeline .add({ targets: "#c1", d: { value: "m 57.448148,23.32043 c 1.325881,-3.987692 3.604197,-15.5292647 5.561097,-21.58195 2.588246,3.669803 14.434368,22.578712 17.846178,27.24239 -3.911841,2.390834 -23.162515,12.469019 -27.665843,14.942 1.178782,-8.13362 3.437763,-15.857133 4.258568,-20.60244 z", duration: 1500, easing: "easeInOutQuad" }, fill: { value: "#00B39F", duration: 1500, easing: "easeInOutQuad" }, offset: 1000 }) .add({ targets: "#c2", d: { value: "m 37.565554,17.956883 c 6.64672,-3.590272 16.622375,-4.082915 22.029028,-2.688017 -0.486203,3.224946 -2.542321,9.737419 -3.074643,12.806824 -3.7467,-1.037736 -11.33404,0.201832 -14.938384,1.873071 -0.970415,-2.123401 -3.43057,-9.339106 -4.016001,-11.991878 z", duration: 1500, easing: "easeInOutQuad" }, fill: { value: "#00B39F", duration: 1500, easing: "easeInOutQuad" }, offset: 1000 }) .add({ targets: "#c3", d: { value: "m 17.12274,38.673129 c 2.946643,-9.851574 13.29457,-18.022881 20.540107,-20.850181 1.500294,5.253537 2.709002,8.742819 3.975945,12.039854 -6.940599,2.981363 -10.452718,7.851589 -12.303849,12.688531 -2.67188,-0.78203 -8.340309,-2.297253 -12.212203,-3.878204 z", duration: 1500, easing: "easeInOutQuad" }, fill: { value: "#00B39F", duration: 1500, easing: "easeInOutQuad" }, offset: 1000 }) .add({ targets: "#c4", d: { value: "m 17.254508,38.586717 c 4.500101,1.676724 8.153323,2.629534 11.991556,3.806543 -1.786767,5.908697 -1.315232,11.167368 -0.953051,15.025443 -4.191429,1.983076 -7.662495,3.882845 -11.720961,5.832685 -2.629894,-7.782299 -1.853349,-20.359249 0.682456,-24.664671 z", duration: 1500, easing: "easeInOutQuad" }, fill: { value: "#00B39F", duration: 1500, easing: "easeInOutQuad" }, offset: 1000 }) .add({ targets: "#c5", d: { value: "m 43.918283,76.626634 c -1.325881,3.987692 -3.604197,15.529265 -5.561097,21.58195 -2.588246,-3.669803 -14.434368,-22.578712 -17.846178,-27.24239 3.911841,-2.390834 23.162515,-12.469019 27.665843,-14.942 -1.178782,8.13362 -4.195377,19.01386 -4.258568,20.60244 z", duration: 1500, easing: "easeInOutQuad" }, fill: { value: "#00B39F", duration: 1500, easing: "easeInOutQuad" }, offset: 1000 }) .add({ targets: "#c6", d: { value: "m 61.740736,82.903996 c -4.80934,2.399632 -13.840319,3.564018 -19.962321,1.935192 0.931566,-5.288937 1.708191,-8.305315 3.040772,-12.697559 4.636257,0.429186 9.316296,-0.04374 12.636605,-1.244971 2.159593,6.120198 2.665716,7.911277 4.284944,12.007338 z", duration: 1500, easing: "easeInOutQuad" }, fill: { value: "#00B39F", duration: 1500, easing: "easeInOutQuad" }, offset: 1000 }) .add({ targets: "#c7", d: { value: "m 82.510936,65.547352 c -3.850424,7.983523 -13.929648,15.566528 -20.810258,17.41682 -1.52347,-4.041877 -2.919126,-7.157199 -4.266053,-12.060456 6.778214,-2.135397 9.331678,-4.89598 12.971903,-9.64938 4.890221,1.496602 7.383405,2.380921 12.104408,4.293016 z", duration: 1500, easing: "easeInOutQuad" }, fill: { value: "#00B39F", duration: 1500, easing: "easeInOutQuad" }, offset: 1000 }) .add({ targets: "#c8", d: { value: "m 82.328687,65.296848 c -0.208103,5.231655 -6.946947,-2.221742 -12.017797,-3.890343 3.010367,-7.728763 3.689456,-13.120357 2.418383,-18.751566 4.663656,-2.095671 7.318701,-3.43633 12.332596,-5.915413 1.983431,7.117368 1.515534,22.946858 -2.733182,28.557322 z", duration: 1500, easing: "easeInOutQuad" }, fill: { value: "#00B39F", duration: 1500, easing: "easeInOutQuad" }, offset: 1000 }) .add({ targets: "#c8", opacity: { value: 1, duration: 1000, offset: 2000 } });Find the demo below
See the Pen Morphing loader spinner – part II by Mikael Ainalem (@ainalem) on CodePen.
Leave a Reply