Create animated progress bars, skill bars, and completion indicators with custom styles.
A progress bar has two inputs that behave like one: the label text you type and the value you set. Only the value moves the fill - the label is decoration. Set the caption to 'JavaScript, 75%' but the value to 60, and the bar shows 60 while the text says 75. This tool assembles a bar from its parts - track, fill, color, height, corner rounding, animation - with a live preview that updates as you change any of them, so the surprise is usually the label/value split rather than the styling. Decide the number first, then write text that matches it.
A concrete input and expected output from the current implementation.
Input
Skill bar: label 'JavaScript', value 80, fill color teal, track color light gray, rounded ends, height 12px, animate on load.
Expected output
A rendered bar 12px tall with rounded ends: the fill eases from empty to 80% of the track width on load, drawn in teal on a light-gray track and captioned 'JavaScript'. On a 400px track that fill is 320px wide.
The fill width is always the value divided by the total - 80 out of 100, so 80% of the track - and the caption plays no part in it. The stated numbers reconcile: 400 x 0.8 = 320.
The fill's width is the value as a fraction of the total. On the usual 0-100 scale, a value of 80 fills 80% of the track, whatever the label says, and the fill is always that fraction of whatever width you set. Values below zero or above the total clamp at the track's ends, so a bar never shows less than empty or more than full.
Every setting - fill color, track color, height, corner rounding, animation - updates the live preview immediately, and the finished bar is defined entirely by those settings, ready to carry into your own page. The animation runs once when the bar appears, easing the fill from empty to its final width; afterwards the bar rests exactly at the value, and nothing moves again.
A determinate bar - one with a value - fills to that value and stops, because it has an end. Continuous looping motion belongs to indeterminate loaders, which signal 'something is happening' rather than 'this far along', and those usually have no value at all. If the point is to wait, an indeterminate style fits better than any percentage.
Yes. The fill spans exactly 80% of the track's width - 320 pixels on a 400-pixel track. The value has no other meaning: it is not area, not brightness, not where the color stops. Judge progress by the fraction of the track, not by pixel length, because a 50% bar on a wide track can look longer than an 80% bar on a narrow one.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.