https://github.com/tigersway/svelte-reading-bar

Reading progress bar (Svelte/Web Component/Custom Element)
https://github.com/tigersway/svelte-reading-bar

custom-elements svelte web-components

Last synced: 5 months ago
JSON representation

Reading progress bar (Svelte/Web Component/Custom Element)

• Host: GitHub
• URL: https://github.com/tigersway/svelte-reading-bar
• Owner: TigersWay
• License: mit
• Created: 2022-08-05T01:13:40.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2022-08-05T01:33:36.000Z (almost 4 years ago)
• Last Synced: 2025-10-02T13:44:53.819Z (8 months ago)
• Topics: custom-elements, svelte, web-components
• Language: Svelte
• Homepage:
• Size: 24.4 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# reading-bar  ![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/tigersway/svelte-reading-bar?style=flat-square) ![GitHub last commit](https://img.shields.io/github/last-commit/tigersway/svelte-reading-bar?style=flat-square) ![GitHub issues](https://img.shields.io/github/issues/tigersway/svelte-reading-bar?style=flat-square)

## Usage

### via CDN  [![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/@tigersway/reading-bar?label=jsDelivr&logo=jsdelivr&style=flat-square)](https://www.jsdelivr.com/package/npm/@tigersway/reading-bar)

```html

...

  

...

  

```

### via npm/pnpm/yarn  [![npm](https://img.shields.io/npm/dm/@tigersway/reading-bar?label=npmjs&logo=npm&style=flat-square)](https://www.npmjs.com/package/@tigersway/reading-bar)

... and your bundler!

```js

import '@tigersway/reading-bar';

```

### Options

- `selector`: (default body) CSS selector for the readable part of that page,

- `height`: (default 4px) CSS height of the bar,

- `background`: (default linear-gradient(to right, #4169e1, #c6d2f6)) CSS background as color, gradient, etc

## CHANGELOG

- **v1.0.0**

  - First public release