Awesome loader spinner Morphing

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.

Download

Advertisement

Google Matched Content...