Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kenclaron/article-progress-bar.js
Aritlce-Progress-Bar.js for modern websites
https://github.com/kenclaron/article-progress-bar.js
css design-pattern front-end frontend javascript js npm packages scrollbar scrollbars
Last synced: about 1 month ago
JSON representation
Aritlce-Progress-Bar.js for modern websites
- Host: GitHub
- URL: https://github.com/kenclaron/article-progress-bar.js
- Owner: kenclaron
- License: mit
- Created: 2020-02-23T11:57:24.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-11-12T14:13:11.000Z (about 2 years ago)
- Last Synced: 2024-09-30T13:41:15.933Z (about 2 months ago)
- Topics: css, design-pattern, front-end, frontend, javascript, js, npm, packages, scrollbar, scrollbars
- Language: JavaScript
- Homepage:
- Size: 16.6 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Article-Progress-Bar.js
> Vanilla JavaScript article top custom progress bar for website.
## Table of contents
- [Features](#features)
- [Getting started](#getting-started)
- [Syntax](#syntax)
- [Example](#example)
- [License](#license)
- [Browser support](#browser-support)
- [Author](#author)
## Features
- Cross-browser support
- Desktop and mobile platforms support
- Supports custom settings (check out the [syntax](#syntax))
## Main
```text
dist/
├── article-progress-bar.js
└── article-progress-bar.min.js (compressed)
```
## Getting Started
### Installation
```
npm install article-progress-bar.js
```
In browser:
```html
```
### Usage
#### Syntax
```js
new ArticleProgressBar(mobile, heightActive, heightContainer, colorActive, colorContainer);
```
- **mobile** (optional)
- Type: `Boolean`
- For mobile devices or not (default: true).
- **heightActive** (optional)
- Type: `String`
- Height of active element in scrollbar's container (default: "4px").
- **heightContainer** (optional)
- Type: `String`
- Height of scrollbar's container element (default: 4px).
- **colorActive** (optional)
- Type: `String`
- Color of active element in scrollbar's container (default: #f23232).
- **colorContainer** (optional)
- Type: `String`
- Color of scrollbar's container element (default: #f2f2f2).
#### Example
```js
new ArticleProgressBar();
```
## License
The Article-Progress-Bar.js licensed under the [MIT license](https://opensource.org/licenses/MIT).
## Browser support
- Chrome (49.0.2623 or latest)
- Firefox (45.0 or latest)
- Opera (36.0.2130.32 or latest)
- Edge (25.10586/EdgeHTML 13.10586 or latest)
- Safari (9.0 or latest)
## Author
> You can express your gratitude by clicking on one of the links
- [Personal website](https://kenclaron.github.io/kenclaron/)
- [VK](https://vk.com/club190729942)
___________________________________
[↑ back to top](#table-of-contents)