Spinner

import { Spinner } from "@grassroot/ui-react";
 
<Spinner size="sm" />
<Spinner size="md" />
 
<span className="inline-flex items-center gap-2 text-muted">
  <Spinner size="sm" className="text-muted" />
  Provisioning…
</span>

<script setup lang="ts">
import { Spinner } from "@grassroot/ui-vue";
</script>
 
<template>
  <Spinner size="sm" />
  <Spinner size="md" />
  <Spinner size="sm" class-name="text-muted" />
</template>

import { Component } from "@angular/core";
import { GrassrootSpinner } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootSpinner],
  template: `
    <grassroot-spinner size="sm" />
    <grassroot-spinner size="md" />
    <grassroot-spinner size="sm" className="text-muted" />
  `,
})
export class ExampleComponent {
}

<script lang="ts">
  import { Spinner } from "@grassroot/ui-svelte";
</script>
 
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="sm" className="text-muted" />

import { Spinner } from "@grassroot/ui-solid";
 
export function Example() {
  return (
    <>
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="sm" className="text-muted" />
    </>
  );
}