SVG Animated Loops

Today we're thrilled to introduce a new version of the Animated Loops! If you purchased the Nucleo icons, just launch the app and you will automatically receive the new icons.

What's new:

• We've replaced the scripts with CSS animations compatible with all JS frameworks.
• We've updated all the existing icons and created 11 new loaders.

The animations are powered by CSS. They won't be visible if you're importing the icons into an interface design tool (e.g., Figma or Sketch), unless they'll support CSS animations in the future. The loaders will work into any web project.

Important: upgrade to the latest Nucleo version to properly render the animated loops.

Here's a preview of all the loaders:

The interactive icons are marked with a 'play' icon. To preview the animation, select the icon by clicking on it. You can select multiple icons.

CSS Animations #

In the previous version of the animated loops, the animation was stored into the icon SVG code as a <script>. In the new version, the animation is created using CSS. The main benefit is that CSS can be used in any web project.

Here's a code example:

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
  <g class="nc-loop-heart-32-icon-o">
    <path d="M27.764,6.26a7.593,7.593,0,0,0-10.8,0A7.746,7.746,0,0,0,16,7.45,7.6,7.6,0,0,0,5.423,5.279,7.733,7.733,0,0,0,3.269,15.944a7.634,7.634,0,0,0,.973,1.2L16,29,27.764,17.144a7.741,7.741,0,0,0,0-10.884Z" fill="none" stroke="#444" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"/>
  </g>

  <style>
    .nc-loop-heart-32-icon-o {
      --animation-duration: 1.8s;
    }

    .nc-loop-heart-32-icon-o * {
      transform-origin: 50% 50%;
      animation: nc-loop-heart-anim var(--animation-duration) infinite;
    }

    @keyframes nc-loop-heart-anim {
      0%, 20%, 40%, 100% {
        transform: scaleY(1);
      }

      10%, 30% {
        transform: scale(0.8);
      }
    }
  </style>
</svg>

You can copy the SVG code using the icon context menu, paste the code into a web project, and the animation will work right away!

The duration of the animation is controlled by the --animation-duration custom property. Feel free to modify it to speed up/slow down the animation.

Optionally, you can pause the animation using the animation-play-state CSS property. You may need to use the !important rule in CSS to override the specificity of the SVG style.

For example, here's how we use the animation-play-state in the Nucleo app to start the animation only when the icon is selected:

.icon-wrapper:not(.icon-wrapper--selected) svg * {
  animation-play-state: paused !important;
}

Vue and React #

If you're using Vue or React, you can copy a version of the animated icon compatible with your favorite JS framework!

Use the icon context menu or the icon exporter to export the animated icons. If you're using the context menu, make sure the JSX/Vue options are checked in the app settings.

Here's a code example of an animated loop compatible with Vue:

<template><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" :width="width" :height="height"><g :fill="_secondaryfill"><g class="nc-loop-ripple-48-icon-f"><circle cx="24" cy="24" r="24" :fill="fill"></circle><circle cx="24" cy="24" r="24"></circle></g></g></svg></template>

<style>.nc-loop-ripple-48-icon-f{--animation-duration:1.2s}.nc-loop-ripple-48-icon-f *{transform-origin:50% 50%;animation:nc-loop-ripple-anim var(--animation-duration) infinite cubic-bezier(.215,.61,.355,1)}.nc-loop-ripple-48-icon-f :nth-child(2){animation-delay:calc(var(--animation-duration)/-2)}@keyframes nc-loop-ripple-anim{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(1)}}</style>

<script>
export default {
	props: {
		width: {
			type: [Number, String],
			default: "100%"
		},
		height: {
			type: [Number, String],
			default: "100%"
		},
		fill: {
			type: String,
			default: "currentColor"
		},
		secondaryfill: {
			type: String
		}
	},
	computed: {
		_secondaryfill: function () {
			return this.secondaryfill || this.fill
		}
	}
}
</script>

What's next #

Next, we'll update all the interactive icons! Follow us on twitter for project updates and icon freebies ✌️