Qwik spinner - Flowbite

Indicate a loading status when fetching data by using the spinner component built with Qwik and animated with Tailwind CSS based on multiple colors and sizes

The spinner component should be used to indicate a loading status of the content that you're fetching from your database and you can choose from multiple styles, colors, sizes, and animations based on Qwik and Tailwind CSS.

To start using the spinner component make sure you import it from flowbite-qwik :

import { Spinner } from "flowbite-qwik"

Default spinner

Use the default spinner element by adding the <Spinner> Qwik component inside your code and integrate the aria-label attribute to allow screen readers parse the component for accessibility

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Spinner } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex gap-3 p-3">
      <Spinner />
    </div>
  )
})

Spinner colors

Update the colors of the loading spinner by using the color Qwik prop.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Spinner, SpinnerColor } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex gap-3 p-3">
      {(['blue', 'gray', 'green', 'red', 'yellow', 'pink', 'purple', 'white'] as SpinnerColor[]).map((color) => (
        <Spinner size="6" color={color} />
      ))}
    </div>
  )
})

Sizing options

Make the size of the spinner smaller or larger by using the size prop. Choose from xs, sm, md, lg, or xl.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Spinner, SpinnerSize } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex gap-3 p-3">
      {(['0', '0.5', '1', '1.5', '2', '2.5', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as SpinnerSize[]).map((size) => (
        <Spinner size={size} />
      ))}
    </div>
  )
})