@crystal-creations/pulsating-circle

A pulsating circle wrapped in a Vue component based on a codepen by eereeska
4,330
Install
npm install @crystal-creations/pulsating-circle
Latest Version:3.0.0
Vue:2
License:MIT
Last Updated:Mar 1, 2026
Links: GitHub  ·  npm
Maintainer: crystal-creations-bot

@crystal-creations/pulsating-circle

GitHub release (latest SemVer) GitHub Build and publish npm package npm npm

A pulsating circle wrapped in a Vue component based on a codepen by eereeska.

Usage in nuxt 3

  1. Install with

    npm install @crystal-creations/pulsating-circle

  2. Add the following to your nuxt.config.ts.

    export default defineNuxtConfig({
      app: {
        // ...
        modules: [
          // ...
          "@crystal-creations/pulsating-circle/nuxt",
        ],
      },
    });
    
  3. Add the component to your Vue component.

    <template>
      <PulsatingCircle></PulsatingCircle>
    </template>
    

Usage in vue 3

  1. Install with

    npm install @crystal-creations/pulsating-circle

  2. Add the following to your Vue main.ts.

    import { PulsatingCircle } from "@crystal-creations/pulsating-circle";
    import "@crystal-creations/pulsating-circle/styles";
    
    // ...
    
    const app = createApp(App)
    
    app.component("PulsatingCircle", PulsatingCircle);
    
  3. Add the component to your Vue component.

    <template>
      <PulsatingCircle></PulsatingCircle>
    </template>
    

Related Packages

@morev/vue-transitions

Shareable Vue transitions library

412,603 222
animated-number-vue

A vue component with number animation

158,718 211
vue-starport

Shared Vue component across routes with animations

57,522 1,949
vue-progress-circle

Circle progress component for vue 3

11,951 3

Version History

Version Released Vue License
3.0.0 ^2.7.14 MIT
2.0.0 ^2.7.10 MIT
1.0.0 ^2.7.10 MIT
Pre-releases (7)
Version Released Vue License
4.0.0-beta.1 ^3.0.0 MIT
4.0.0-next.2 ^3.0.0 MIT
4.0.0-next.1 ^3.0.0 MIT
3.0.0-beta.1 ^2.7.14 MIT
2.0.0-beta.2 ^2.7.10 MIT