@anedomansky/vue-loaders v1.0.0

vue-loaders

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

Features

Different CSS-loaders/-throbbers:

• CirclingSquares.vue:

• FlippingHexagons.vue:

• JumpingDots.vue:

• PulsatingDot.vue:

• SpinningCircle.vue:

• TravellingBar.vue:

• WanderingSquares.vue:

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

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