Progress

1"use client"23import * as React from "react"4import { Button } from "@/components/ui/button"5import { Progress } from "@/components/ui/progress"67const DURATION_MS = 280089export function Example() {10  const [run, setRun] = React.useState(0)11  const progress = useProgressRun(run)1213  return (14    <div className="relative w-full">15      <Button16        type="button"17        variant="ghost"18        size="icon-sm"19        className="absolute top-0 right-0 z-20"20        aria-label="Reload"21        onClick={() => setRun((n) => n + 1)}22      >23        <ReloadIcon />24      </Button>25      <Progress26        value={progress}27        className="w-full [&_[data-slot=progress-indicator]]:duration-0"28      />29    </div>30  )31}3233function useProgressRun(run: number) {34  const [progress, setProgress] = React.useState(0)3536  React.useEffect(() => {37    setProgress(0)38    const start = performance.now()39    let frame = 04041    function tick(now: number) {42      const t = Math.min(1, (now - start) / DURATION_MS)43      setProgress(Math.round(t * 100))44      if (t < 1) frame = requestAnimationFrame(tick)45    }4647    frame = requestAnimationFrame(tick)48    return () => cancelAnimationFrame(frame)49  }, [run])5051  return progress52}5354function ReloadIcon() {55  return (56    <svg57      xmlns="http://www.w3.org/2000/svg"58      viewBox="0 0 24 24"59      fill="none"60      stroke="currentColor"61      strokeWidth="2"62      strokeLinecap="round"63      strokeLinejoin="round"64      className="size-3.5"65      aria-hidden66    >67      <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />68      <path d="M21 3v5h-5" />69      <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />70      <path d="M8 16H3v5" />71    </svg>72  )73}

1"use client"23import * as React from "react"4import { Button } from "@/components/ui/button"5import { Progress } from "@/components/ui/progress"67const DURATION_MS = 280089export function Example() {10  const [run, setRun] = React.useState(0)11  const progress = useProgressRun(run)1213  return (14    <div className="relative w-full">15      <Button16        type="button"17        variant="ghost"18        size="icon-sm"19        className="absolute top-0 right-0 z-20"20        aria-label="Reload"21        onClick={() => setRun((n) => n + 1)}22      >23        <ReloadIcon />24      </Button>25      <Progress26        value={progress}27        className="w-full [&_[data-slot=progress-indicator]]:duration-0"28      />29    </div>30  )31}3233function useProgressRun(run: number) {34  const [progress, setProgress] = React.useState(0)3536  React.useEffect(() => {37    setProgress(0)38    const start = performance.now()39    let frame = 04041    function tick(now: number) {42      const t = Math.min(1, (now - start) / DURATION_MS)43      setProgress(Math.round(t * 100))44      if (t < 1) frame = requestAnimationFrame(tick)45    }4647    frame = requestAnimationFrame(tick)48    return () => cancelAnimationFrame(frame)49  }, [run])5051  return progress52}5354function ReloadIcon() {55  return (56    <svg57      xmlns="http://www.w3.org/2000/svg"58      viewBox="0 0 24 24"59      fill="none"60      stroke="currentColor"61      strokeWidth="2"62      strokeLinecap="round"63      strokeLinejoin="round"64      className="size-3.5"65      aria-hidden66    >67      <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />68      <path d="M21 3v5h-5" />69      <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />70      <path d="M8 16H3v5" />71    </svg>72  )73}

1"use client"23import * as React from "react"4import { Button } from "@/components/ui/button"5import {6  Progress,7  ProgressLabel,8  ProgressValue,9} from "@/components/ui/progress"1011const DURATION_MS = 28001213export function Example() {14  const [run, setRun] = React.useState(0)15  const progress = useProgressRun(run)1617  return (18    <div className="relative w-full">19      <Button20        type="button"21        variant="ghost"22        size="icon-sm"23        className="absolute top-0 right-0 z-20"24        aria-label="Reload"25        onClick={() => setRun((n) => n + 1)}26      >27        <ReloadIcon />28      </Button>29      <Progress30        value={progress}31        className="w-full [&_[data-slot=progress-indicator]]:duration-0"32      >33        <ProgressLabel>Upload progress</ProgressLabel>34        <ProgressValue />35      </Progress>36    </div>37  )38}3940function useProgressRun(run: number) {41  const [progress, setProgress] = React.useState(0)4243  React.useEffect(() => {44    setProgress(0)45    const start = performance.now()46    let frame = 04748    function tick(now: number) {49      const t = Math.min(1, (now - start) / DURATION_MS)50      setProgress(Math.round(t * 100))51      if (t < 1) frame = requestAnimationFrame(tick)52    }5354    frame = requestAnimationFrame(tick)55    return () => cancelAnimationFrame(frame)56  }, [run])5758  return progress59}6061function ReloadIcon() {62  return (63    <svg64      xmlns="http://www.w3.org/2000/svg"65      viewBox="0 0 24 24"66      fill="none"67      stroke="currentColor"68      strokeWidth="2"69      strokeLinecap="round"70      strokeLinejoin="round"71      className="size-3.5"72      aria-hidden73    >74      <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />75      <path d="M21 3v5h-5" />76      <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />77      <path d="M8 16H3v5" />78    </svg>79  )80}

1"use client"23import * as React from "react"4import {5  Progress,6  ProgressLabel,7  ProgressValue,8} from "@/components/ui/progress"9import { Slider } from "@/components/ui/slider"1011export function Example() {12  const [value, setValue] = React.useState([40])1314  return (15    <div className="grid w-full gap-4">16      <Progress17        value={value[0] ?? 0}18        className="w-full [&_[data-slot=progress-indicator]]:duration-0"19      >20        <ProgressLabel>Export</ProgressLabel>21        <ProgressValue />22      </Progress>23      <Slider24        value={value}25        onValueChange={(next) => {26          const nextValue = readSliderValue(next)27          setValue((prev) => (prev[0] === nextValue ? prev : [nextValue]))28        }}29        min={0}30        max={100}31        step={1}32      />33    </div>34  )35}3637function readSliderValue(next: number | readonly number[]) {38  if (typeof next === "number") return next39  if (Array.isArray(next)) return next[0] ?? 040  return 041}