Spinner Component
First Pattern
Features
- Fully Customizable
- Variant options
- Server Side state handled
Dependencies
- "tailwindcss" - for styling
Demo
- Fully Customizable
- Variant options
- Server Side state handled
Variant can either be small, medium or large.
The color can be any valid tailwind color class
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Code
vue
<script setup lang="ts">
import { computed } from "vue";
const props = withDefaults(
defineProps<{
loadingText?: string;
size?: "large" | "medium" | "small";
color?: string
}>(),
{
loadingText: "Loading...",
size: "medium",
color: ""
}
);
const spinnerClass = computed(() => {
let base =
"animate-spin inline-block border-[3px] border-current border-t-transparent rounded-full";
if (props.size == "large") {
base += " w-10 h-10";
} else if (props.size == "medium") {
base += " w-7 h-7";
} else {
base += " w-4 h-4";
}
base += " " + props.color
return base;
});
</script>
<template>
<!-- html markup code gotten from https://preline.co/docs/spinners.html -->
<div :class="spinnerClass" role="status" aria-label="loading">
<span class="sr-only">{{ loadingText }}</span>
</div>
</template>vue
<script setup lang="ts">
import { ref } from "vue";
import Spinner1 from "../components/Spinner/Spinner1.vue";
</script>
<template>
<p>Variant can either be small, medium or large.</p>
<p>The color can be any valid tailwind color class</p>
<div class="p-3 mt-4 gap-4 h flex items-center">
<Spinner1 size="medium" />
<Spinner1 size="small" color="text-green-600" />
<Spinner1 size="medium" color="text-blue-600 dark:text-blue-500" />
<Spinner1 size="large" color="text-orange-600" />
<Spinner1 size="small" color="text-pink-600" />
<Spinner1 size="medium" color=" text-purple-600" />
<Spinner1 size="large" color="text-indigo-600" />
</div>
</template>