https://github.com/jarekdanielak/monospace-loader
Monospace font-based, Pac-Man style progress bar. Works everywhere.
https://github.com/jarekdanielak/monospace-loader
loader monospace pacman progress-bar web-component
Last synced: about 2 months ago
JSON representation
Monospace font-based, Pac-Man style progress bar. Works everywhere.
- Host: GitHub
- URL: https://github.com/jarekdanielak/monospace-loader
- Owner: jarekdanielak
- License: mit
- Created: 2026-04-23T17:47:44.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2026-04-23T18:21:30.000Z (2 months ago)
- Last Synced: 2026-04-23T20:16:32.254Z (2 months ago)
- Topics: loader, monospace, pacman, progress-bar, web-component
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/monospace-loader
- Size: 76.2 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```bash
npm install monospace-loader
```
## Usage
### Plain HTML
```html
import 'monospace-loader';
```
### React
```tsx
import MonospaceLoader from 'monospace-loader';
```
## 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:
```js
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.
```bash
git clone https://github.com/jarekdanielak/monospace-loader
cd monospace-loader
npm install
npm run dev
```
## License
MIT