+page.svelte

<script lang="ts">
	import DocsShell from '$lib/layouts/DocsShell/DocsShell.svelte';
	import { DocsFeature, type DocsShellSettings } from '$lib/layouts/DocsShell/types';
	import DocsPreview from '$lib/components/DocsPreview/DocsPreview.svelte';
	// Components
	import { ProgressBar, CodeBlock } from '@skeletonlabs/skeleton';
	// Sveld
	import sveldProgressBar from '@skeletonlabs/skeleton/components/ProgressBar/ProgressBar.svelte?raw&sveld';

	// Defaults
	const defaultRounded = 'rounded-token';
	const defaultMeter = 'bg-surface-900-50-token';
	const defaultTrack = 'bg-surface-200-700-token';

	// Docs Shell
	const settings: DocsShellSettings = {
		feature: DocsFeature.Component,
		name: 'Progress Bars',
		description: 'An indicator showing the progress or completion of a task.',
		imports: ['ProgressBar'],
		source: 'packages/skeleton/src/lib/components/ProgressBar',
		aria: 'https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role',
		components: [{ sveld: sveldProgressBar }]
	};

	// Reactive Props
	$: props = {
		determinate: true,
		value: 50,
		max: 100,
		step: 10,
		height: 'h-2',
		rounded: defaultRounded,
		meter: defaultMeter,
		track: defaultTrack
	};
</script>

<DocsShell {settings}>
	<!-- Slot: Sandbox -->
	<svelte:fragment slot="sandbox">
		<DocsPreview>
			<svelte:fragment slot="preview">
				<ProgressBar bind:value={props.value} max={props.max} />
			</svelte:fragment>
			<svelte:fragment slot="footer">
				<div class="w-48 mx-auto"><input type="range" min="0" bind:value={props.value} max={props.max} step={props.step} /></div>
			</svelte:fragment>
			<svelte:fragment slot="source">
				<CodeBlock language="html" code={`<ProgressBar value={${props.value}} max={${props.max}} />`} />
			</svelte:fragment>
		</DocsPreview>
	</svelte:fragment>

	<!-- Slot: Usage -->
	<svelte:fragment slot="usage">
		<section class="space-y-4">
			<h2 class="h2">Indeterminate Mode</h2>
			<p>Remove the <code class="code">value</code> property or set value to <code class="code">undefined</code>.</p>
			<DocsPreview background="neutral">
				<svelte:fragment slot="preview">
					<div class="w-full space-y-10">
						<ProgressBar />
						<div class="w-full space-y-4">
							<ProgressBar meter="bg-primary-500" track="bg-primary-500/30" />
							<ProgressBar meter="bg-secondary-500" track="bg-secondary-500/30" />
							<ProgressBar meter="bg-tertiary-500" track="bg-tertiary-500/30" />
							<ProgressBar meter="bg-success-500" track="bg-success-500/30" />
							<ProgressBar meter="bg-warning-500" track="bg-warning-500/30" />
							<ProgressBar meter="bg-error-500" track="bg-error-500/30" />
						</div>
						<!-- <ProgressBar
							meter="bg-gradient-to-r variant-gradient-secondary-primary"
							track="bg-gradient-to-r variant-gradient-primary-secondary"
						/> -->
					</div>
				</svelte:fragment>
				<svelte:fragment slot="source">
					<CodeBlock language="html" code={`<ProgressBar />`} />
					<CodeBlock language="html" code={`<ProgressBar value={undefined} />`} />
				</svelte:fragment>
			</DocsPreview>
			<h3 class="h3">Custom Animation</h3>
			<p>Use the <code class="code">animIndeterminate</code> prop to pass a custom CSS animation for the progress bar meter.</p>
			<DocsPreview background="neutral">
				<svelte:fragment slot="preview">
					<div class="w-full space-y-10">
						<ProgressBar animIndeterminate="anim-progress-bar-example" />
					</div>
				</svelte:fragment>
				<svelte:fragment slot="source">
					<p>Define your new animation class in your global stylesheet <code class="code">app.postcss</code>.</p>
					<CodeBlock
						language="css"
						code={`
.anim-progress-bar {
	transform-origin: 0% 50%;
	animation: anim-progress-bar 2s infinite linear;
}
@keyframes anim-progress-bar {
	0% { transform: translateX(50%) scaleX(0.5); }
	50% { transform: translateX(0) scaleX(0.5); }
	100% { transform: translateX(50%) scaleX(0.5); }
}
`}
					/>
					<p>Append the animation class to via the <code class="code">animIndeterminate</code> prop.</p>
					<CodeBlock language="html" code={`<ProgressBar animIndeterminate="anim-progress-bar"/>`} />
				</svelte:fragment>
			</DocsPreview>
		</section>
		<section class="space-y-4">
			<h2 class="h2">Native Alternative</h2>
			<p>
				The native <code class="code">progress</code> element works cross browser, but does not currently support Indeterminate mode when styled.
			</p>
			<DocsPreview background="neutral">
				<svelte:fragment slot="preview">
					<progress value={props.value} max={props.max} />
				</svelte:fragment>
				<svelte:fragment slot="source">
					<CodeBlock language="html" code={`<progress value={props.value} max={props.max} />`} />
				</svelte:fragment>
			</DocsPreview>
		</section>
		<hr />
		<section class="space-y-4">
			<h2 class="h2">Accessibility</h2>
			<!-- prettier-ignore -->
			<p>
				This component is treated as an <a class="anchor" href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role" target="_blank" rel="noreferrer">ARIA progressbar</a>.
			</p>
		</section>
	</svelte:fragment>
</DocsShell>