import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as n}from"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";import{o as l,c as o,H as s,l as a,Q as p}from"./chunks/framework.3f630664.js";const r={class:"vp-raw"},E={__name:"FwbSpinnerExample",setup(e){return(t,c)=>(l(),o("div",r,[s(a(n))]))}},i={class:"vp-raw flex items-center gap-2"},y={__name:"FwbSpinnerExampleColor",setup(e){return(t,c)=>(l(),o("div",i,[s(a(n),{color:"blue"}),s(a(n),{color:"gray"}),s(a(n),{color:"green"}),s(a(n),{color:"pink"}),s(a(n),{color:"purple"}),s(a(n),{color:"red"}),s(a(n),{color:"white"}),s(a(n),{color:"yellow"})]))}},d={class:"vp-raw flex items-center gap-2"},u={__name:"FwbSpinnerExampleSize",setup(e){return(t,c)=>(l(),o("div",d,[s(a(n)),s(a(n),{size:"6"}),s(a(n),{size:"8"}),s(a(n),{size:"10"}),s(a(n),{size:"12"})]))}},h=p('

Vue Spinner - Flowbite ​

Use the spinner component as a loader indicator in your projects when fetching data based on an animated SVG using the utility classes from Tailwind CSS ​

TIP

Original reference: https://flowbite.com/docs/components/spinner/

The spinner component can be used as a loading indicator which comes in multiple colors, sizes, and styles separately or inside elements such as buttons to improve the user experience whenever data is being fetched from your server.

Basic example ​

',6),_=p(`
vue
<template>
  <fwb-spinner />
</template>

<script setup>
import { FwbSpinner } from 'flowbite-vue'
</script>
<template>
  <fwb-spinner />
</template>

<script setup>
import { FwbSpinner } from 'flowbite-vue'
</script>

Prop - size ​

`,2),g=p(`
vue
<template>
  <fwb-spinner />
  <fwb-spinner size="6" />
  <fwb-spinner size="8" />
  <fwb-spinner size="10" />
  <fwb-spinner size="12" />
</template>

<script setup>
import { FwbSpinner } from 'flowbite-vue'
</script>
<template>
  <fwb-spinner />
  <fwb-spinner size="6" />
  <fwb-spinner size="8" />
  <fwb-spinner size="10" />
  <fwb-spinner size="12" />
</template>

<script setup>
import { FwbSpinner } from 'flowbite-vue'
</script>

Prop - color ​

`,2),b=p(`
vue
<template>
  <fwb-spinner color="blue" />
  <fwb-spinner color="gray" />
  <fwb-spinner color="green" />
  <fwb-spinner color="pink" />
  <fwb-spinner color="purple" />
  <fwb-spinner color="red" />
  <fwb-spinner color="white" />
  <fwb-spinner color="yellow" />
</template>

<script setup>
import { FwbSpinner } from 'flowbite-vue'
</script>
<template>
  <fwb-spinner color="blue" />
  <fwb-spinner color="gray" />
  <fwb-spinner color="green" />
  <fwb-spinner color="pink" />
  <fwb-spinner color="purple" />
  <fwb-spinner color="red" />
  <fwb-spinner color="white" />
  <fwb-spinner color="yellow" />
</template>

<script setup>
import { FwbSpinner } from 'flowbite-vue'
</script>

API ​

Props ​

NameValuesDefault
colorblue, gray, green, pink, purple, red, white, yellowblue
size0, 0.5, 1, 1.5, 10, 11, 12, 2, 2.5, 3, 4, 5, 6, 7, 8, 94
`,4),q=JSON.parse('{"title":"Vue Spinner - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/spinner.md","filePath":"components/spinner.md"}'),F={name:"components/spinner.md"},v=Object.assign(F,{setup(e){return(t,c)=>(l(),o("div",null,[h,s(E),_,s(u),g,s(y),b]))}});export{q as __pageData,v as default};