vb-loader

Loader components for Vue3. Demo

Components

• LoaderFacebook
• LoaderDualRing
• LoaderCircle
• LoaderRoller
• LoaderRing
• LoaderHeart
• LoaderGrid
• LoaderEllipsis
• LoaderDefault
• LoaderSpinner
• LoaderRipple
• LoaderHourglass
• LoaderContent

Installation

npm i vb-loaders

Example

<template>
  <LoaderRoller />
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { LoaderRoller } from 'vb-loaders';

export default defineComponent({
  components: {
    LoaderRoller,
  },
});
</script>

Content Loader Example

<template>
  <LoaderContent :disable="loading" :blur="true" innerLoader="LoaderSpinner">
    <div>
      <h1>Hello World!</h1>
    </div>
  </LoaderContent>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { LoaderContent } from 'vb-loaders';

export default defineComponent({
  components: {
    LoaderContent,
  },
  setup() {
    const loading = ref(true);
    return { loading };
  },
});
</script>

CSS Variables for Customizing

:root {
  --vb-loader-circle-background-color: #ffffff;
  --vb-loader-default-background-color: #ffffff;
  --vb-loader-dual-ring-background-color: #ffffff;
  --vb-loader-ellipsis-background-color: #ffffff;
  --vb-loader-facebook-background-color: #ffffff;
  --vb-loader-grid-background-color: #ffffff;
  --vb-loader-heart-background-color: #ffffff;
  --vb-loader-hourGlass-background-color: #ffffff;
  --vb-loader-ring-background-color: #ffffff;
  --vb-loader-ripple-background-color: #ffffff;
  --vb-loader-roller-background-color: #ffffff;
  --vb-loader-spinner-background-color: #ffffff;

  --vb-loader-content-background-color: #212121;
  --vb-loader-content-opacity: 0.6;
  --vb-loader-content-z-index: 999;
  --vb-loader-content-inner-loader-z-index: 1000;
  --vb-loader-content-glass-blur: 15px;
  --vb-loader-content-glass-background: rgba(255, 255, 255, 0.25);
}