ZvLoader
ZvLoader is a standalone component to display an animated loader
INFO
Before you have to import the global css files in your project, follow instructions in Getting Started
Basic usage
vue
<template>
<ZvLoader />
</template>
<script lang="ts" setup>
import ZvLoader from '@zadigetvoltaire/ui/components/ZvLoader'
</script>Loading message with font-size
loading message
html
<ZvLoader loading-message="loading message" font-size="18" />Color
html
<div class="flex flex-col gap-4">
<ZvLoader color="black" />
<div class="bg-brand p-4">
<ZvLoader color="white" />
</div>
</div>sizing
The loader size depends on the font size applied to the component
html
<ZvLoader class="h-6" />
<ZvLoader class="h-12" />
<ZvLoader class="h-16" />
<ZvLoader class="h-24" />
<ZvLoader class="h-32" />fullsize
vue
<template>
<ZvButton @click="showFullscreenLoader = true"> Show fullscreen loader </ZvButton>
<ZvLoader v-if="showFullscreenLoader" fullscreen @click="showFullscreenLoader = false" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import ZvLoader from '@zadigetvoltaire/ui/components/ZvLoader'
import ZvButton from '@zadigetvoltaire/ui/components/ZvButton'
const showFullscreenLoader = ref(false)
</script>