What data formats are supported?

You can input data as a JSON array (e.g., [{"label": "Task", "value": 50}]) or as a simple text list (e.g., Task:50).

Can I change the orientation of the bars?

Yes, you can toggle between horizontal and vertical orientations to best fit your layout.

Is it possible to set a target reference line?

Yes, by enabling the 'Show Target Line' option and entering a target value, you can visualize progress relative to a specific goal.

Can I customize the colors of the bars?

Yes, you can provide comma-separated hex color codes to define the look of your progress bars.

Are the progress bars animated?

Yes, you can enable the 'Animated Progress' checkbox to create a smooth loading effect when the bars appear.

Elysia Tools

Navigation

Data Visualization

Progress Bar Generator

Generate customizable progress bars from data, perfect for showing completion status, rankings, or comparative values

Execution

Run this tool

Fill in the form, run the tool, and review the result in one place.

Inputs

Options are grouped so long tools stay easier to scan.

15 options

ContentPaste or type the main input values.3

Chart DatatextareaRequiredData for the progress bars. Supports JSON array or simple label:value text formatChart TitletextOptionalTitle that will be displayed above the chartBar ColorstextOptionalColors for progress bars (comma-separated hex colors). Leave empty for default colors.

SettingsAdjust formats, ranges, numbers, and modes.7

OrientationselectOptionalBar StyleselectOptionalBar Height (Horizontal) / Width (Vertical)numberOptionalHeight of horizontal bars or width of vertical bars in pixelsMaximum ValuenumberOptionalMaximum value for the progress scale (leave empty for auto-scale)Minimum ValuenumberOptionalMinimum value for the progress scaleTarget ValuenumberOptionalTarget value to display as a reference lineBackground ColorcolorOptionalBackground color for the chart container

TogglesEnable or disable optional behavior.5

Show PercentagescheckboxOptionalEnabled when checkedDisplay percentage values on the progress barsShow ValuescheckboxOptionalEnabled when checkedDisplay actual values on the progress barsAnimated ProgresscheckboxOptionalEnabled when checkedAnimate the progress bars when they loadRounded BarscheckboxOptionalEnabled when checkedUse rounded corners for progress barsShow Target LinecheckboxOptionalEnabled when checkedDisplay a reference line for the target value

Result

Ready for a run

Run the tool to preview files, text, structured data, or streamed output here.

Samples

Progress Bar Generator

Run this tool

Inputs

Result

Examples that match this tool

Continue with connected tools and hubs

Inputs

Result

Learn when to use this tool, what it supports, and how real users apply it.

Key facts

Overview

When to use

How it works

Use cases

Examples

1. Project Milestone Tracker

2. Sales Quota Dashboard

FAQ

QR Code Samples

ELK Stack Log Analysis Samples

Grafana Advanced Application Samples

Distributed Tracing Samples

Donut Chart Generator

Funnel Chart Generator

Pictograph Generator

Radar Chart Generator

Chart and Diagram Generators

JSON Interchange and Format Translation Tools

Text Case, Encoding, and Normalization Conversion Tools

JSON Inspection, Diff, and Transformation Tools