piapia123
en

Text Progress Bar Generator

Text

Everything runs locally in your browser — nothing is uploaded

Input
Drop a file here to load its contents
Output

Turn lines of percent and label into monospace progress bars, wrapped in a code block ready to paste into a README. ⚠️ The eighths ramp `▏▎▍▌▋▊▉█` gives each character 8 levels, not 1, so even at a width of a dozen characters it can show the difference between 35% and 37% — that is why it beats the plain block style. ⚠️ Width is measured in display width (a Chinese character takes two cells), which keeps the label column aligned; 0% is all empty and 100% is all full, with no leftover cell. Everything runs in your browser.

Features

  • Five styles: blocks, gradient, dots, arrows and eighths
  • The eighths ramp `▏▎▍▌▋▊▉█` gives 8 levels per character for precision at small widths
  • Width measured in display width, so CJK labels stay aligned
  • 0% is all empty and 100% is all full, with no leftover cell at the edges
  • The percentage can sit inside the bar or after it
  • The percentage is optional and averages by line count
  • A code block ready to paste into a README at the end
  • Everything runs locally and nothing is uploaded

How to use

  1. Write one percent and label per line, such as `35 Installing`
  2. Pick a style and a width
  3. Choose whether the percentage goes inside the bar or after it
  4. Copy the code block into a README or a ticket

FAQ

Why are the eighths more precise?
Because each character has 8 levels (▏ is 1/8, ▌ is 4/8, █ is 8/8) while a block has only filled or empty. At a width of 10, 35% is 3 cells plus a half cell (3.5) in eighths, but a block can only round to 4 cells. The narrower the bar, the more this matters.
How do CJK labels stay aligned?
By measuring display width rather than character count. In a monospace font a Chinese character takes two cells, so padding by character count leaves that column short and shifts everything. The tool measures the real width and pads with spaces, so mixed scripts line up.
What do 0% and 100% look like?
0% is entirely empty (dots become circles, blocks become the empty shade, eighths become spaces) and 100% is entirely full. These two edges are where rounding most easily leaves a stray cell, so they are handled separately.
Can it really be pasted into a README?
Yes. The output ends with a code block fenced as ```text holding monospace characters, which GitHub, GitLab and most Markdown renderers show as written. Note that some renderers strip trailing spaces, so alignment relies on the bar widths matching rather than on padding.

Related tools