A Colorful SVG Spinner Vue.js Component

I just created a simple Vue.js spinner using SVG and CSS animation to iterate along with the different colors.

The default spinner comes from Glenn McComb post, where he created a spinning SVG circle using CSS animation. I have slightly adjusted it to put in a Vue.js template.

The HTML part is straight forward; we have a circle in 100 by 100 view box, centered at 50 with a radius of 45.

In the CSS part, I have changed the stroke color to our very first color, a subtle pink, and set a linear animation for color change:

In our Vue.js component, we need to set the colors data property, which we used Tailwind 400 level colors. Next, I’ve created an interval of 2000 millisecond to iterate through colors. We also set the destroy method in our Vue.js component to clear interval after we are done with showing spinner.

Final result:

For Nuxt.js, as we don’t have access to document on the server-side, we need to wrap the color change in <a href="https://nuxtjs.org/api/context/">process.client</a> condition to only run on the client-side and add <a href="https://github.com/nuxt/eslint-plugin-nuxt/blob/master/docs/rules/no-globals-in-created.md">eslint-disable-line nuxt/no-globals-in-created</a> comment to prevent eslint from throwing error.