Nonstop Progressive Marxism

    vue3-spinners
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.1 • Public • Published

    vue3-spinners

    npm version

    Spinner components for Vue 3.

    These components were exported from Quasar's spinner components (https://quasar.dev/vue-components/spinners) and from vue-spinners (which itself was a port of react-spinners) so the authors of these libraries deserve all of the credit for these amazing spinner animations!

    Online Demo

    To see all the spinners in action, press visit the following online demo: https://leonzalion.github.io/vue3-spinners

    Installation

    npm install vue3-spinners

    Usage

    To use the spinners, import the ones you want to use in your Vue component:

    <script>
    import {
      VueSpinner,
      // ...
    } from 'vue3-spinners';
    
    export default {
      components: {
        VueSpinner,
        // ...
      },
    };
    </script>
    
    <template>
      <VueSpinner size="20" color="red" />
      <!-- ... -->
    </template>

    Using <script setup> (recommended):

    <script setup>
    import {
      VueSpinner,
      // ...
    } from 'vue3-spinners';
    </script>
    
    <template>
      <VueSpinner size="20" color="red" />
      <!-- ... -->
    </template>

    If you want the spinners to be available globally without needing to import them manually, add the following to your app's entrypoint:

    import { createApp } from 'vue';
    import App from './app.vue';
    import { VueSpinnersPlugin } from 'vue3-spinners';
    
    const app = createApp(App);
    app.use(VueSpinnersPlugin);
    // ...

    Universal Props (accepted by each spinner)

    color

    Type: string
    Default: #000000
    Supported Spinners: all

    All spinners accept a color property that sets the color of the spinner.

    Spinner-dependent Props

    Each spinner takes different properties whose effect depends on the spinner being used; please refer to the file for each spinner to find out which properties it accepts (which is indicated by the destructuring of the defineProps function): https://github.com/leonzalion/vue3-spinners/tree/main/packages/vue3-spinners/src/spinners

    Example:

    // vue-spinner-scale.vue
    const {
      color,
      height: heightProp,
      width: widthProp,
      radius: radiusProp,
      margin: marginProp,
    } = defineProps();
    // ...

    This defineProps destructuring indicates that <VueSpinnerScale> accepts the following props: color, height, width, radius, margin

    size

    Type: CSS <length>

    The size of the spinner.

    height

    Type: CSS <length>

    The height of the spinner.

    width

    Type: CSS <length>

    The width of the spinner.

    radius

    Type: CSS <length>

    The radius of the spinner.

    margin

    Type: CSS <length>

    The margin of the spinner.

    Install

    npm i vue3-spinners

    DownloadsWeekly Downloads

    16

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    177 kB

    Total Files

    106

    Last publish

    Collaborators

    • leonzalion