Progress

import { Progress } from "@grassroot/ui-react";
 
<Progress value={64} aria-label="Upload progress" />
<Progress indeterminate aria-label="Loading" />

<script setup lang="ts">
import { Progress } from "@grassroot/ui-vue";
</script>
 
<template>
  <Progress :value="64" aria-label="Upload progress" />
  <Progress indeterminate aria-label="Loading" />
</template>

import { Component } from "@angular/core";
import { GrassrootProgress } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootProgress],
  template: `
    <grassroot-progress [value]="64" aria-label="Upload progress" />
    <grassroot-progress [indeterminate]="true" aria-label="Loading" />
  `,
})
export class ExampleComponent {
}

<script lang="ts">
  import { Progress } from "@grassroot/ui-svelte";
</script>
 
<Progress value={64} aria-label="Upload progress" />
<Progress indeterminate aria-label="Loading" />

import { Progress } from "@grassroot/ui-solid";
 
export function Example() {
  return (
    <>
      <Progress value={64} aria-label="Upload progress" />
      <Progress indeterminate aria-label="Loading" />
    </>
  );
}