Nighttime Pachinko Marathon

    @anedomansky/vue-loaders
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    vue-loaders

    npm version

    A collection of pure CSS loaders made available as Vue components.

    Features

    Different CSS-loaders/-throbbers:

    • CirclingSquares.vue:

    CirclingSquares

    • FlippingHexagons.vue:

    FlippingHexagons

    • JumpingDots.vue:

    JumpingDots

    • PulsatingDot.vue:

    PulsatingDot

    • SpinningCircle.vue:

    SpinningCircle

    • TravellingBar.vue:

    TravellingBar

    • WanderingSquares.vue:

    WanderingSquares

    Installation

    npm install @anedomansky/vue-loaders

    Setup

    <script setup>
      import '/node_modules/@anedomansky/vue-loaders/dist/style.css';
      import { SpinningCircle } from '@anedomansky/vue-loaders';
    </script>

    Usage

    <template>
      <SpinningCircle
        ref="loader"
        text="Please wait"
        container-classes="test-spinning-circle"
        item-classes="item-test-spinning-circle"
      ></SpinningCircle>
      <button type="button" @click="open">Open loader</button>
    </template>
    <script setup>
      import '/node_modules/@anedomansky/vue-loaders/dist/style.css';
      import { SpinningCircle } from '@anedomansky/vue-loaders';
      import { ref } from 'vue';
    
      const loader = ref(null);
    
      let timer;
    
      function open() {
        loader.value.showLoader();
        timer = setTimeout(close, 60000);
      }
    
      function close() {
        loader.value.hideLoader();
        clearTimeout(timer);
      }
    </script>

    Props

    Name Type Default Description
    dialogClasses string '' Additional CSS classes for the <dialog>-Element
    textClasses string '' Additional CSS classes for the <p>-Element
    containerClasses string '' Additional CSS classes for the <div>-Element
    itemClasses string '' Additional CSS classes for the <div>-Element
    text string '' Loader text (e. g. 'Please wait')
    backgroundColor string undefined Color of the <dialog>:backdrop
    color string '#485665' Color of the loader
    animationDuration string Loader dependent The duration of the loader's animation

    Customization

    You can always overwrite CSS classes that the different loader's are composed of.

    Additionally, you can overwrite specific CSS custom properties that the loaders are using:

    • CirclingSquares.vue:
      • --square: The size of the square
    • FlippingHexagons.vue:
      • --hexagon: The base size of the hexagon
    • JumpingDots.vue:
      • --dot: The size of the dot
    • PulsatingDot.vue:
      • --pulsating-dot: The size of the dot
    • SpinningCircle.vue:
      • --spinner: The size of the circle
      • --border-inner-spinner: The size of the inner border
      • --border-outer-spinner: The size of the outer border
    • TravellingBar.vue:
      • --bar-height: The height of the bar
      • --bar-width: The width of the bar
    • WanderingSquares.vue:
      • --square: The size of the square

    Install

    npm i @anedomansky/vue-loaders

    DownloadsWeekly Downloads

    4

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    127 kB

    Total Files

    28

    Last publish

    Collaborators

    • anedomansky