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

| 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