SVG Animated Loops

Introducing the new SVG animated loaders

Author picture

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:

Animated loops preview
Preview of the 48px animated loops

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.

click to start
Click to start the animation

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!

context-menu
Icon context menu

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;
}

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>

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

Love free, pretty icons?

Join our newsletter and receive a free icon pack each month. (Example).

Mailbox illustration

Icon management, solved.

Mac, Windows, All Downloads

Nucleo app preview