Sliding bars

<script setup lang="ts">
import { VSlidingBarsLoader } from "veload";
import "veload/style.css";
</script>

<template>
  <VSlidingBarsLoader :size="48" color="#6d3ff2" :duration="1200" label="Loading content" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { VSlidingBarsLoader } from "veload";
import "veload/style.css";

const size = ref(48);
const color = ref("#6d3ff2");
const duration = ref(1200);
const label = ref("Loading content");
</script>

<template>
  <VSlidingBarsLoader :size="size" :color="color" :duration="duration" :label="label" />
</template>

import { VSlidingBarsLoader, type NamedLoaderProps } from "veload";

// VSlidingBarsLoader accepts the shared NamedLoaderProps type.
const props: NamedLoaderProps = {
  size: 48,
  color: "#6d3ff2",
  duration: 1200,
  label: "Loading content",
};

// Render it: <VSlidingBarsLoader v-bind="props" />

npm install veload

// Nuxt — nuxt.config.ts
export default defineNuxtConfig({
  css: ["veload/style.css"],
});

// Vite / Webpack — main.ts
import "veload/style.css";