Article-Progress-Bar.js

Vanilla JavaScript article top custom progress bar for website.

Table of contents

• Features
• Getting started
  • Syntax
  • Example
• License
• Browser support
• Author

Features

• Cross-browser support
• Desktop and mobile platforms support
• Supports custom settings (check out the syntax)

Main

dist/
├── article-progress-bar.js
└── article-progress-bar.min.js   (compressed)

Getting Started

Installation

npm install article-progress-bar.js

In browser:

<script src="/path/to/article-progress-bar.js"></script>

Usage

Syntax

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

new ArticleProgressBar();

License

The Article-Progress-Bar.js licensed under the MIT license.

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
• VK

---

↑ back to top