🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

Preloader (Spinner) Vue Component

Preloader Components

There are following components included:

  • Preloader

Preloader Props

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.iconIosstring'text-primary'
colors.iconMaterialstring'text-md-light-primary dark:text-md-dark-primary'
componentstring'span'

Component's HTML Element

sizestring'w-8 h-8'

Tailwind CSS size classes

Examples

Preloader.vue
<template>
<k-page>
<k-navbar title="Preloader" />
<k-block-title>Default</k-block-title>
<k-block strong inset-material outline-ios class="text-center">
<k-preloader />
</k-block>
<k-block-title>Colors</k-block-title>
<k-block strong inset-material outline-ios class="grid grid-cols-4">
<div class="text-center">
<k-preloader class="k-color-brand-red" />
</div>
<div class="text-center">
<k-preloader class="k-color-brand-green" />
</div>
<div class="text-center">
<k-preloader class="k-color-brand-purple" />
</div>
<div class="text-center">
<k-preloader class="k-color-brand-yellow" />
</div>
</k-block>
<k-block-title>Sizes</k-block-title>
<k-block
strong
inset-material
outline-ios
class="grid grid-cols-4 items-center"
>
<div class="text-center">
<k-preloader size="w-4 h-4" />
</div>
<div class="text-center">
<k-preloader size="w-8 h-8" />
</div>
<div class="text-center">
<k-preloader size="w-12 h-12" />
</div>
<div class="text-center">
<k-preloader size="w-16 h-16" />
</div>
</k-block>
</k-page>
</template>
<script>
import {
kPage,
kNavbar,
kNavbarBackLink,
kBlock,
kBlockTitle,
kPreloader,
} from 'konsta/vue';
export default {
components: {
kPage,
kNavbar,
kNavbarBackLink,
kBlock,
kBlockTitle,
kPreloader,
},
};
</script>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.