ASCII Progress Bar

Features

Lightweight

Zero dependencies, only ~2KB gzipped

Customizable

Multiple built-in patterns and custom character support

Web Component

Works with any framework or vanilla JavaScript

TypeScript

Full TypeScript support with type definitions included

Quick Start

npm

# create a new project with npm
npm install @yacosta738/ascii-progress-bar

pnpm

# create a new project with pnpm
pnpm add @yacosta738/ascii-progress-bar

Yarn

# create a new project with yarn
yarn add @yacosta738/ascii-progress-bar

Usage Example

<ascii-progress-bar progress="75" pattern="blocks"></ascii-progress-bar>

<script type="module">
  import { AsciiProgressBar } from '@yacosta738/ascii-progress-bar';
  // The component will auto-register
</script>

Live Demo

Try different patterns:

Year Progress

Default Pattern (75%)

Dots Pattern (60%)

Blocks Pattern (85%)

Minimal Pattern (45%)

Custom Pattern (45%)

For more examples and detailed usage, check out the documentation.

Why ASCII Progress Bar?

Framework Agnostic

Built as a Web Component, works everywhere - React, Vue, Angular, or plain HTML

Easy to Style

Multiple built-in patterns and support for custom characters

Accessible

ARIA attributes for accessibility and keyboard navigation