Progress

<script lang="ts">
	import Progress from '@tcpsystems/ui/foundation/Progress';
</script>

<Progress label="Deploying gateway" value={42} showValue />

<script lang="ts">
	import Progress from '@tcpsystems/ui/foundation/Progress';
	import Button from '@tcpsystems/ui/foundation/Button';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	import Cluster from '@tcpsystems/ui/foundation/Cluster';
	let uploaded = $state(0);
</script>

<Stack>
	<Progress label={`Uploaded ${uploaded} of 4 build artifacts`} value={uploaded} max={4} showValue />
	<Cluster>
		<Button disabled={uploaded === 4} onclick={() => uploaded++}>Upload next artifact</Button>
		<Button onclick={() => uploaded = 0}>Reset upload</Button>
	</Cluster>
</Stack>

<script lang="ts">
	import Progress from '@tcpsystems/ui/foundation/Progress';
	import Stack from '@tcpsystems/ui/foundation/Stack';
</script>

<Stack>
	<Progress label="Waiting for a build runner" />
	<Progress label="Uploading source" value={25} size="sm" showValue />
	<Progress label="Building image" value={50} showValue />
	<Progress label="Checking deployment" value={75} size="lg" showValue />
</Stack>

<script lang="ts">
	import Progress from '@tcpsystems/ui/foundation/Progress';
	import Stack from '@tcpsystems/ui/foundation/Stack';
</script>

<Stack>
	<Progress tone="neutral" label="Artifacts cached" value={40} showValue />
	<Progress tone="accent" label="Deployment rollout" value={60} showValue />
	<Progress tone="info" label="Logs indexed" value={80} showValue />
	<Progress tone="ok" label="Health checks passed" value={100} showValue />
	<Progress tone="warn" label="Storage quota used" value={85} showValue />
	<Progress tone="danger" label="Failed build before interruption" value={35} showValue />
</Stack>