Progress Bar generator
Show step completion, quota attainment or onboarding progress with a linear bar, a ring, or segmented steps — whichever matches the metric you are tracking.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<div class="studio-progress">
<lightning-progress-bar value={value} size="large" class="studio-progress__bar"></lightning-progress-bar>
<span class="studio-progress__label">{value}%</span>
</div>
</template>Design tips for progress bars
- Use a ring for a single headline metric (quota %); use segmented steps for a fixed number of stages.
- Turn on glow sparingly — it is most effective on a single hero metric, not a page full of bars.
- Keep track color low-contrast so the fill color is what actually draws the eye.