Creating an infinite SVG animation loop using JavaScript

elem = document.querySelectorAll("path");
function task(i) { 
  setTimeout(function() { 
      elem[i].animate({fill: 'green'},  { 
  // timing options
  duration: 150,
  iterations: 1 
});
  }, 150*i); 
} 
for(var i=0;i<8;i++){
task(i);
}
<svg id="loader" width="254" height="254" viewBox="0 0 254 254" fill="none" xmlns="http://www.w3.org/2000/svg">
<path  d="M138.015 34.5808C117.296 32.0597 97.1508 36.6367 80.1964 46.5191L71.6421 32.9501C91.9092 21.0282 116.102 15.5873 140.949 18.8694L138.015 34.5808Z" fill="#EEEEEE"/>
<path d="M203.656 74.5674C191.286 56.3592 172.481 42.5299 149.774 36.777L152.706 21.0752C179.936 27.7257 202.455 44.2535 217.124 66.077L203.656 74.5674Z" fill="#EEEEEE"/>
<path d="M219.029 137.837C221.314 119.063 217.771 100.762 209.733 84.8775L223.247 76.3584C233.303 95.5622 237.715 117.885 234.731 140.769L219.029 137.837Z" fill="#EEEEEE"/>
<path d="M179.116 203.428C197.288 191.057 211.088 172.272 216.833 149.596L232.545 152.53C225.94 179.766 209.459 202.302 187.676 217.005L179.116 203.428Z" fill="#EEEEEE"/>
<path d="M115.774 218.851C134.578 221.139 152.91 217.58 168.812 209.515L177.407 223.148C158.161 233.274 135.767 237.725 112.808 234.731L115.774 218.851Z" fill="#EEEEEE"/>
<path d="M53.429 183.416C65.7319 199.368 83.2405 211.392 104.014 216.655L101.047 232.545C75.6752 226.392 54.3812 211.669 39.6992 192.072L53.429 183.416Z" fill="#EEEEEE"/>
<path d="M46.7421 173.491C36.8287 156.52 32.2341 136.346 34.759 115.595L18.8694 112.628C15.5774 137.55 21.0611 161.813 33.0578 182.118L46.7421 173.491Z" fill="#EEEEEE"/>
<path d="M21.0752 100.871L36.9552 103.836C42.2262 83.0316 54.2774 65.502 70.2645 53.1963L61.6752 39.5718C42.039 54.2239 27.2708 75.5031 21.0752 100.871Z" fill="#EEEEEE"/>

</svg>

I have a collection of paths that I want to use for a loading animation. The goal is to change the color of each path at specific intervals to create a rotating loader effect. However, I've encountered an issue where running this animation continuously crashes my page. If anyone has any ideas on how to fix this and make it work smoothly, I'd greatly appreciate the help!

javascriptloopsanimationsvgsvg-animate

Answer №1

There is no requirement to utilize the animation API.

You have the option to create a spinner using only CSS.

svg#loader > path {
    animation-name: go;
    animation-duration: 1200ms;
    animation-iteration-count: infinite;
}

svg#loader > path:nth-child(2) { animation-delay: 150ms }
svg#loader > path:nth-child(3) { animation-delay: 300ms }
svg#loader > path:nth-child(4) { animation-delay: 450ms }
svg#loader > path:nth-child(5) { animation-delay: 600ms }
svg#loader > path:nth-child(6) { animation-delay: 750ms }
svg#loader > path:nth-child(7) { animation-delay: 900ms }
svg#loader > path:nth-child(8) { animation-delay: 1050ms }

@keyframes go {
    0% {
        fill: #EEEEEE;
    }
    12.5% {
        fill: green;
    }
    25% {
        fill: #EEEEEE;
    }
}
<svg id="loader" width="254" height="254" viewBox="0 0 254 254" fill="none" xmlns="http://www.w3.org/2000/svg">
<path  d="M138.015 34.5808C117.296 32.0597 97.1508 36.6367 80.1964 46.5191L71.6421 32.9501C91.9092 21.0282 116.102 15.5873 140.949 18.8694L138.015 34.5808Z" fill="#EEEEEE"/>
<path d="M203.656 74.5674C191.286 56.3592 172.481 42.5299 149.774 36.777L152.706 21.0752C179.936 27.7257 202.455 44.2535 217.124 66.077L203.656 74.5674Z" fill="#EEEEEE"/>
<path d="M219.029 137.837C221.314 119.063 217.771 100.762 209.733 84.8775L223.247 76.3584C233.303 95.5622 237.715 117.885 234.731 140.769L219.029 137.837Z" fill="#EEEEEE"/>
<path d="M179.116 203.428C197.288 191.057 211.088 172.272 216.833 149.596L232.545 152.53C225.94 179.766 209.459 202.302 187.676 217.005L179.116 203.428Z" fill="#EEEEEE"/>
<path d="M115.774 218.851C134.578 221.139 152.91 217.58 168.812 209.515L177.407 223.148C158.161 233.274 135.767 237.725 112.808 234.731L115.774 218.851Z" fill="#EEEEEE"/>
<path d="M53.429 183.416C65.7319 199.368 83.2405 211.392 104.014 216.655L101.047 232.545C75.6752 226.392 54.3812 211.669 39.6992 192.072L53.429 183.416Z" fill="#EEEEEE"/>
<path d="M46.7421 173.491C36.8287 156.52 32.2341 136.346 34.759 115.595L18.8694 112.628C15.5774 137.55 21.0611 161.813 33.0578 182.118L46.7421 173.491Z" fill="#EEEEEE"/>
<path d="M21.0752 100.871L36.9552 103.836C42.2262 83.0316 54.2774 65.502 70.2645 53.1963L61.6752 39.5718C42.039 54.2239 27.2708 75.5031 21.0752 100.871Z" fill="#EEEEEE"/>

</svg>

Answer №2

To create a smooth animation transitioning from white to green, you will need at least 2 keyframes enclosed in square brackets. Additionally, instead of using `setTimeout`, consider incorporating a delay feature.

let elem = document.querySelectorAll("path");

function animatePath(i) {
  elem[i].animate([{ fill: "white" }, { fill: "green" }], {
    // timing options
    duration: 150*elem.length,
    iterations: Infinity,
    delay: 150 * (i-1)
  });
}

for (var i = 0; i < elem.length; i++) {
  animatePath(i);
}
body{background:black}
<svg id="loader" width="254" height="254" viewBox="0 0 254 254" fill="none" xmlns="http://www.w3.org/2000/svg">
<path  d="M138.015 34.5808C117.296 32.0597 97.1508 36.6367 80.1964 46.5191L71.6421 32.9501C91.9092 21.0282 116.102 15.5873 140.949 18.8694L138.015 34.5808Z" fill="#EEEEEE"/>
<path d="M203.656 74.5674C191.286 56.3592 172.481 42.5299 149.774 36.777L152.706 21.0752C179.936 27.7257 202.455 44.2535 217.124 66.077L203.656 74.5674Z" fill="#EEEEEE"/>
<path d="M219.029 137.837C221.314 119.063 217.771 100.762 209.733 84.8775L223.247 76.3584C233.303 95.5622 237.715 117.885 234.731 140.769L219.029 137.837Z" fill="#EEEEEE"/>
<path d="M179.116 203.428C197.288 191.057 211.088 172.272 216.833 149.596L232.545 152.53C225.94 179.766 209.459 202.302 187.676 217.005L179.116 203.428Z" fill="#EEEEEE"/>
<path d="M115.774 218.851C134.578 221.139 152.91 217.58 168.812 209.515L177.407 223.148C158.161 233.274 135.767 237.725 112.808 234.731L115.774 218.851Z" fill="#EEEEEE"/>
<path d="M53.429 183.416C65.7319 199.368 83.2405 211.392 104.014 216.655L101.047 232.545C75.6752 226.392 54.3812 211.669 39.6992 192.072L53.429 183.416Z" fill="#EEEEEE"/>
<path d="M46.7421 173.491C36.8287 156.52 32.2341 136.346 34.759 115.595L18.8694 112.628C15.5774 137.55 21.0611 161.813 33.0578 182.118L46.7421 173.491Z" fill="#EEEEEE"/>
<path d="M21.0752 100.871L36.9552 103.836C42.2262 83.0316 54.2774 65.502 70.2645 53.1963L61.6752 39.5718C42.039 54.2239 27.2708 75.5031 21.0752 100.871Z" fill="#EEEEEE"/>

</svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating PDF files from elements using Puppeteer JS

In my quest to master the usage of Puppeteer within a Vue.js application, I am facing a challenge. I am able to create a PDF based on the entire page successfully, but I am struggling to generate a PDF for a specific element on the page. Is there a method ...

javascriptvue.jspdf-generationpuppeteerhtml2pdf

Alignment of Material-UI dialogue buttons on the left side

I have a Dialog containing three buttons as shown below: https://i.stack.imgur.com/T6o35.png Here is the JSX code: <DialogActions classes={{ root: this.props.classes.dialogActionsRoot }} > <Button classes={{ root: this.props ...

javascripthtmlcssmaterial-ui

Is it possible to utilize a computed property for dynamically styling a table row based on certain conditions?

I have a table of users that I am currently rendering, and my goal is to highlight the entire row only for the current user. My initial thought was to use a computed property to achieve this, but I seem to be facing some difficulties in making it work. I ...

javascriptvue.js

External vendor scripts such as JavaScript and jQuery are not functioning properly after being rendered in a ReactJS environment

I am currently developing a frontend web app using ReactJS. I obtained a template from W3layout that is built with HTML5, CSS3, and custom JS files, along with various third-party/vendor plugins like nice-select, bootstrap, slik, owl-carousel, etc. Despit ...

javascriptjqueryreactjs

Guide on converting a complex nested json into the jquery autocomplete format

How can I properly format a complex nested JSON for use with jQuery autocomplete? I have been attempting to map my custom JSON data to fit the required jQuery autocomplete format of label and value, but unfortunately, my list is returning as 'undefine ...

javascriptjsonjquery-ui-autocomplete

Determine whether the elements in the master array match the elements in the child array

Checking for data presence in arrays: [ { "productDisplay": "ZXP 105", "productNumber": "WZDR 112" }, { "productDisplay": "ZXP 106", "productNumber": "WZDR 113" } ] ChildArray [{productDisplay:"ZXP 105", ...

javascriptnode.jsmocha.jschai

Tips for regularly retrieving information from a psql table

I have a scenario where I am retrieving data from a psql table and converting it into a JSON array to be used for displaying a time series chart using JavaScript. The data that is passed needs to be in the form of an array. Since the data in the table get ...

javascriptphphtmlpostgresql

How can you merge the class attribute with the ng-class directive based on boolean values?

In my custom directive's link function, I have the following code that dynamically generates a map using d3... map.append("g") .selectAll("path") .data(topojson.feature(counties, counties.objects.counties).features) .enter() .append("path") .attr("d" ...

javascriptangularjsd3.jsng-class

Non-reactive arrays in Vue.js

I am facing an issue. Here is the problem: data: { tracks: [] } The tracks array will contain a complex object. I want to achieve reactivity when assigning a new value to tracks nested object, but I do not need deep reactivity for the object. ...

javascriptvue.jsvuejs2

Issue with Next.js hook: Uncaught TypeError - Unable to define properties of undefined (setting 'type')

Encountered an error while attempting to build my nextjs app. Strangely, this error wasn't present in the previous version of the app. I didn't make any changes to the config files, just added a few animation libraries and that's all, along ...

javascriptreactjstypescriptwebpacktypes

Multi-line input in ExtJs

Is there a way to create a multiline input with vertical scrollbars in EXTJS? I tried the following code: noteField = new Ext.form.TextField({ emptyText: 'note...', multiline: true, applyTo: &apos ...

javascriptextjs

At what point are DOMs erased from memory?

Recently, I've been working on an application that involves continuous creation and removal of DOM elements. One thing I noticed is that the process memory for the browser tab keeps increasing even though the javascript heap memory remains steady. To ...

javascripthtmldommemory-managementmemory-leaks

Experiencing difficulties with updating populated inputs that are connected to fetched data as they are not reflecting changes when modified

I am currently facing challenges with handling text fields in my web application. I need to retrieve data from the database, populate it in the appropriate fields, allow users to edit the information, and save any changes made. However, I have encountered ...

javascriptreactjsmaterial-ui

Using vue-select: In VueJs, how to pass an option slot from a grandparent component

Utilizing a custom dropdown component called 'vue-select', there is an option to customize the options view using slots as detailed in this documentation -> https://vue-select.org/guide/slots.html I am aiming to achieve a similar customizatio ...

javascriptvue.jsvuejs2vue-select

Obtain the value of a checkbox using jQuery

Here is an example of dynamic checkboxes: <input type="checkbox" checked="checked" value="1" name="user_mail_check[]" class="ami"> <input type="checkbox" checked="checked" value="2" name="user_mail_check[]" class="ami"> <input type="checkbo ...

javascriptjquerycheckbox

Having trouble clearing the interval after setting it?

I developed a slideshow script called function slide(). The intention is for this function to begin when the 'play' button is clicked and pause when the 'pause' button is clicked. I implemented setinterval and it functions properly, how ...

javascriptslideshowsetintervalclearinterval

Jquery display function experiencing unresponsiveness

Currently, I am trying to implement some show/hide functionality in my JavaScript file: $(document).ready(function() { $('#me').hide(); $('#send').click(function() { $('#me').show("slow"); }); }); Strange ...

javascriptjqueryhtml

When building websites, pages, or applications with React, how do you determine the best choice between JavaScript, TypeScript, or JavaScriptXML?

After completing my portfolio and an eCommerce website design using Figma, I started learning React and Tailwind with Vite. I'm comfortable with basic JavaScript but now I want to understand the differences between .js, .jsx, and .ts files when workin ...

javascriptreactjstypescripttailwind-cssvite

Clickable Angular Material card

I am looking to make a mat-card component clickable by adding a routerlink. Here is my current component structure: <mat-card class="card" > <mat-card-content> <mat-card-title> {{title}}</mat-card-title> &l ...

javascriptangulartypescriptangular-material

Loop through and append items to an array

Adding an object that represents a food item using a method with loops is causing unexpected output. Here is the method: public boolean addItem(FoodItem other) { boolean isAdded = false; int i = 0; while(i<_stock.length) { if(_ ...

javaarraysloopsoop