# Vue Spinner Component - 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/](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 ```vue ``` ## Prop - size ```typescript type SpinnerSize = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' defineProps({ size: { type: String as PropType, // any string for w-${size} and h-${size} tailwind classes default: '4', }, }) ``` ```vue ``` ## Prop - color ```typescript type SpinnerColor = 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white' defineProps({ color: { type: String as PropType, default: 'blue', }, }) ``` ```vue ```