Loading

<Loading />

<Wrap gap="md">
  <For
    each={[
      { variant: "oval", color: "red" },
      { variant: "grid", color: "orange" },
      { variant: "audio", color: "yellow" },
      { variant: "dots", color: "green" },
      { variant: "puff", color: "teal" },
      { variant: "rings", color: "blue" },
      { variant: "circles", color: "cyan" },
    ]}
  >
    {({ variant, color }) => (
      <Loading variant={variant} fontSize="3xl" color={`${color}.500`} />
    )}
  </For>
</Wrap>

<Wrap gap="md">
  <For
    each={[
      { variant: "oval", fontSize: "lg", color: "red" },
      { variant: "grid", fontSize: "xl", color: "orange" },
      { variant: "audio", fontSize: "2xl", color: "yellow" },
      { variant: "dots", fontSize: "3xl", color: "green" },
      { variant: "puff", fontSize: "4xl", color: "teal" },
      { variant: "rings", fontSize: "5xl", color: "blue" },
      { variant: "circles", fontSize: "6xl", color: "cyan" },
    ]}
  >
    {({ variant, fontSize, color }) => (
      <Loading variant={variant} fontSize={fontSize} color={`${color}.500`} />
    )}
  </For>
</Wrap>