@cypress-design/vue-spinner

Spinner

Install

npm install @cypress-design/vue-spinner

or with yarn

yarn add @cypress-design/vue-spinner

Usage

import Spinner from '@cypress-design/vue-spinner'

You can either use the default spinner and import the styles manually.

<script setup>
import Spinner from '@cypress-design/vue-spinner'
import '@cypress-design/vue-spinner/style.css'
</script>

<template>
  <div class="flex flex-col items-center justify-center gap-[12px] h-[20vh]">
    <Spinner />
    <h2 class="text-gray-700 text-size-16px leading-[24px]">
      Initializing something really important...
    </h2>
  </div>
</template>

...or directly import the Spinner SFC and use it as a component.

• Note the /sfc at the end of import line

<script setup>
import Spinner from '@cypress-design/vue-spinner/sfc'
</script>

<template>
  <div class="flex flex-col items-center justify-center gap-[12px] h-[20vh]">
    <Spinner />
    <h2 class="text-gray-700 text-size-16px leading-[24px]">
      Initializing something really important...
    </h2>
  </div>
</template>