Progress
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
<script lang="ts">
import { onMount } from "svelte";
import { Progress } from "$lib/components/ui/progress/index.js";
let value = $state(13);
onMount(() => {
const timer = setTimeout(() => (value = 66), 500);
return () => clearTimeout(timer);
});
</script>
<Progress {value} max={100} class="w-[60%]" />Installation
pnpm dlx jsrepo@latest add progressnpx jsrepo@latest add progressyarn dlx jsrepo@latest add progressbunx jsrepo@latest add progressInstall bits-ui:
pnpm add bits-ui -Dnpm install bits-ui -Dyarn add bits-ui -Dbun add bits-ui -DCopy and paste the following code into your project.
import Root from './progress.svelte';
export {
Root,
//
Root as Progress
};
Usage
<script lang="ts">
import { Progress } from '$lib/components/ui/progress/index.js';
</script><Progress value={33} />