Перейти к содержимому
opensophy

Интерфейс

Прогресс-бар

Индикатор прогресса с настраиваемым значением и плавной анимацией.

Progress

Индикатор прогресса с плавной анимацией изменения ширины. Значение от 0 до 100.

Интерактивное демо

Перетащите слайдер, чтобы изменить значение прогресса.

Загрузка... %

Пропсы

65%
<script lang="ts">
	import { cn } from '$lib/utils/cn';

	type Props = {
		progress: number;
		class?: string;
	};

	let { progress, class: className = '' }: Props = $props();

	const clamped = $derived(Math.min(100, Math.max(0, progress)));
</script>

<div class={cn('h-2 w-full overflow-hidden rounded-full bg-background-inset', className)}>
	<div
		class="h-full rounded-full bg-accent transition-[width] duration-300 ease-out"
		style:width={`${String(clamped)}%`}
	></div>
</div>

<script lang="ts">
	import { cn } from '$lib/utils/cn';

	type Props = {
		progress: number;
		class?: string;
	};

	let { progress, class: className = '' }: Props = $props();

	const clamped = $derived(Math.min(100, Math.max(0, progress)));
</script>

<div class={cn('h-2 w-full overflow-hidden rounded-full bg-background-inset', className)}>
	<div
		class="h-full rounded-full bg-accent transition-[width] duration-300 ease-out"
		style:width={`${String(clamped)}%`}
	></div>
</div>

Примеры использования

Базовый прогресс 

<Progress progress={45} />
<Progress progress={45} />

Полная загрузка 

<Progress progress={100} />
<Progress progress={100} />

Небольшой прогресс 

<Progress progress={15} />
<Progress progress={15} />

Пропсы

Пропс Тип По умолчанию Описание
progress number — Значение прогресса (0–100)
class string — Дополнительные классы