Svelte Progressradial

Use the progress radial component to show the progress of a process.

Setup #

Import the Progressradial component in a script tag.

  • Svelte
<script>
  import { Progressradial } from "flowbite-svelte";
</script>

Progress #

  • Svelte
<script>
  import { Progressradial } from "flowbite-svelte";
</script>

<Progressradial progress={20} />
<Progressradial progress="40" />
<Progressradial progress={65} />
<Progressradial progress="83" />

Colors and labelOutside #

  • Svelte
<script>
  import { Progressradial } from "flowbite-svelte";
</script>

<Progressradial progress={65} labelOutside="default" />
<Progressradial color="secondary" progress="65" labelOutside="secondary" />
<Progressradial color="gray" progress="65" labelOutside="gray" />
<Progressradial color="red" progress="65" labelOutside="red" />
<Progressradial color="orange" progress="65" labelOutside="orange" />
<Progressradial color="amber" progress="65" labelOutside="amber" />
<Progressradial color="yellow" progress="65" labelOutside="yellow" />
<Progressradial color="lime" progress="65" labelOutside="lime" />
<Progressradial color="green" progress="65" labelOutside="green" />
<Progressradial color="emerald" progress="65" labelOutside="emerald" />
<Progressradial color="teal" progress="65" labelOutside="teal" />
<Progressradial color="cyan" progress="65" labelOutside="cyan" />
<Progressradial color="sky" progress="65" labelOutside="sky" />
<Progressradial color="blue" progress="65" labelOutside="blue" />
<Progressradial color="indigo" progress="65" labelOutside="indigo" />
<Progressradial color="violet" progress="65" labelOutside="violet" />
<Progressradial color="purple" progress="65" labelOutside="purple" />
<Progressradial color="fuchsia" progress="65" labelOutside="fuchsia" />
<Progressradial color="pink" progress="65" labelOutside="pink" />
<Progressradial color="rose" progress="65" labelOutside="rose" />

Radius #

  • Svelte
<script>
  import { Progressradial } from "flowbite-svelte";
</script>

<Progressradial radius={10} />
<Progressradial radius={15} />
<Progressradial radius={20} />
<Progressradial radius={25} />

Thickness #

  • Svelte
<script>
  import { Progressradial } from "flowbite-svelte";
</script>

<Progressradial />
<Progressradial thickness={5} />
<Progressradial thickness={10} />
<Progressradial thickness={15} />

Size #

  • Svelte
<script>
  import { Progressradial } from "flowbite-svelte";
</script>

<Progressradial size="w-20 h-20" />
<Progressradial size="w-28 h-28" />
<Progressradial size="w-32 h-32" />
<Progressradial size="w-40 h-40" />

Animation #

  • Svelte
<script>
  import { Progressradial, Button } from "flowbite-svelte";
  import { sineOut } from "svelte/easing";
  let progress = $state(45);
</script>

<Progressradial {progress} animate precision={1} labelOutside="Animation" labelInside tweenDuration={1000} easing={sineOut} />
<Button onclick={() => (progress = `${Math.round(Math.random() * 100)}`)} class="mx-auto mt-8 w-24">Randomize</Button>

Starting position #

  • Svelte
<script>
  import { Progressradial } from "flowbite-svelte";
</script>

<Progressradial />
<Progressradial progress={50} startingPosition="right" />
<Progressradial progress={50} startingPosition="bottom" />
<Progressradial progress={50} startingPosition="left" />

See also #

Loading related links...

Component data #

The component has the following props, type, and default values. See types page for type information.

Starter Kit StepIndicator