monospace-loader

Monospace font-based, Pac-Man style progress bar built as a framework-agnostic Web Component.

Works in plain HTML, React, Vue, or any other framework.

Install

npm install monospace-loader

Usage

Plain HTML

<script type="module">
  import 'monospace-loader';
</script>

<monospace-loader progress="50"></monospace-loader>

React

import MonospaceLoader from 'monospace-loader';

<MonospaceLoader progress={progress} trackColor="#aaa" />

Properties

| HTML attribute | React prop | Type | Default | Description | |----------------|--------------|----------|-----------|-------------------------------------| | progress | progress | number | 0 | Fill amount, 0–100 | | cols | cols | number | 32 | Total character width | | color | color | string | #d35400 | Color of the Pac-Man character | | track-color | trackColor | string | inherited | Color of brackets, dashes, and dots | | forever | forever | boolean | false | Loops indefinitely, ignores progress |

All properties can also be set as JS properties:

const el = document.querySelector('monospace-loader');
el.progress = 75;
el.color = 'steelblue';

Showcase

The repo includes a React app that demonstrates all props and variants.

git clone https://github.com/jarekdanielak/monospace-loader
cd monospace-loader
npm install
npm run dev

License

MIT