Progress

const progressFixture = {
  id: "progress",
  value: 64,
  max: 100,
  label: "Upload progress",
  indeterminateLabel: "Loading",
} satisfies {
  id: string;
  value: number;
  max: number;
  label: string;
  indeterminateLabel: string;
};
 
import { Progress } from "@grassroot/ui-react";
 
export default function ProgressDemo() {
  return (
    <div className="flex w-full max-w-[420px] flex-col gap-3.5">
      <Progress
        value={progressFixture.value}
        max={progressFixture.max}
        label={progressFixture.label}
      />
      <Progress indeterminate label={progressFixture.indeterminateLabel} />
    </div>
  );
}

<script setup lang="ts">
const progressFixture = {
  id: "progress",
  value: 64,
  max: 100,
  label: "Upload progress",
  indeterminateLabel: "Loading",
} satisfies {
  id: string;
  value: number;
  max: number;
  label: string;
  indeterminateLabel: string;
};
 
import { Progress } from "@grassroot/ui-vue";
</script>
 
<template>
  <div class="flex w-full max-w-[420px] flex-col gap-3.5">
    <Progress
      :value="progressFixture.value"
      :max="progressFixture.max"
      :label="progressFixture.label"
    />
    <Progress indeterminate :label="progressFixture.indeterminateLabel" />
  </div>
</template>

import { Component } from "@angular/core";
const progressFixture = {
  id: "progress",
  value: 64,
  max: 100,
  label: "Upload progress",
  indeterminateLabel: "Loading",
} satisfies {
  id: string;
  value: number;
  max: number;
  label: string;
  indeterminateLabel: string;
};
 
import { GrassrootProgress } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-progress-demo",
  standalone: true,
  imports: [GrassrootProgress],
  host: { style: "display: contents" },
  template: `
    <div class="flex w-full max-w-[420px] flex-col gap-3.5">
      <grassroot-progress [value]="fixture.value" [max]="fixture.max" [label]="fixture.label" />
      <grassroot-progress [indeterminate]="true" [label]="fixture.indeterminateLabel" />
    </div>
  `,
})
export class ProgressDemoComponent {
  protected readonly fixture = progressFixture;
}
 
export default ProgressDemoComponent;

<script lang="ts">
  import { Progress } from "@grassroot/ui-svelte";
  const progressFixture = {
    id: "progress",
    value: 64,
    max: 100,
    label: "Upload progress",
    indeterminateLabel: "Loading",
  } satisfies {
    id: string;
    value: number;
    max: number;
    label: string;
    indeterminateLabel: string;
  };
 
  </script>
 
<div class="flex w-full max-w-[420px] flex-col gap-3.5">
  <Progress value={progressFixture.value} max={progressFixture.max} label={progressFixture.label} />
  <Progress indeterminate label={progressFixture.indeterminateLabel} />
</div>

/** @jsxImportSource solid-js */
import { Progress } from "@grassroot/ui-solid";
const progressFixture = {
  id: "progress",
  value: 64,
  max: 100,
  label: "Upload progress",
  indeterminateLabel: "Loading",
} satisfies {
  id: string;
  value: number;
  max: number;
  label: string;
  indeterminateLabel: string;
};
 
export default function ProgressDemo() {
  return (
    <div class="flex w-full max-w-[420px] flex-col gap-3.5">
      <Progress
        value={progressFixture.value}
        max={progressFixture.max}
        label={progressFixture.label}
      />
      <Progress indeterminate label={progressFixture.indeterminateLabel} />
    </div>
  );
}