Visualization

Spinner

For hover, active and focus-visible states to work properly, you need to define the 'icon-root' class on the parent element (e.g. button). For custom active state, you can also use the 'active' class.

/lib/some-action.svelte

<script lang="ts">
	import { NumberInput, Spinner, Toggle } from '@leon8ix/jhana-ui';

	let specific = $state(true);
	let value = $state(0.67);
</script>

<div class="input-group">
	<Toggle bind:checked={specific} label="Specific progress" />
	<NumberInput bind:value min={0} max={1} step={0.05} disabled={!specific} />
	<Spinner value={specific ? value : undefined} />
</div>

Specific progress

Progress Bar

In case you want to visualize the progress of a major action, the Spinner might be too subdued. In those cases, you should use this beautiful ProgressBar component.

/routes/+layout.svelte

<script lang="ts">
	import { NumberInput, ProgressBar } from '@leon8ix/jhana-ui';

	let value = $state(0.5);
</script>

<div class="input-group">
	<NumberInput bind:value min={0} max={1} step={0.05} />
	<ProgressBar {value} width="50%" />
</div>

Page Progress

You can display the page loading state with this component. It shows up at the very top pixels of the page. So it can only be used for global loading indication.

/routes/+layout.svelte

<script lang="ts">
	import { NumberInput, PageProgress, Toggle } from '@leon8ix/jhana-ui';

	let show = $state(false);
	let value = $state(0.5);
</script>

<PageProgress value={show ? value : null} />

<div class="input-group">
	<Toggle bind:checked={show} label="Show progress" />
	<NumberInput bind:value min={0} max={1} step={0.05} disabled={!show} />
</div>

Show progress