Angular-reading-indicator by dominicrico

AngularJS directive that shows progressbar with the current reading progress of a given article or the whole website with a reading time estimate.

You see a working example on top of the page!

Installation

You can choose your preferred method of installation:

Through bower: bower install angular-reading-indicator --save
Through npm: npm install angular-reading-indicator --save
From a CDN: jsDelivr
Download from github: angular-reading-indicator

Usage

Include both ng-reading-indicator.min.js and ng-reading-indicator.min.css in your application.

<script src="components/angular-reading-indicator/ng-reading-indicator.min.js"></script>

<link rel="stylesheet" href="components/angular-reading-indicator/ng-reading-indicator.min.css">

Add the module ngReadingIndicator as a dependency to your app module:

var myapp = angular.module('myapp', ['ngReadingIndicator']);

Configuration

Set your prefered options to customize the look of the progress bar and reading estimate. Available/Default options:

options = {
  showHeadline: true, // Show headline in the progress bar (only works if expand is true or type is "big")
  expand: true, // Show small bar and expand to big after passing the headline
  type: 'small', // Type of bar if expand is "false" available options are "small" or "big"
  readingTime: {
    enable: true, // Show the estimate reading time
    prefix: 'estimate ca. ', // Prefix of estimate
    suffix: 'min', // Suffix of estimate
    speed: 150, // Reading speed in words per minute
    seconds: false // Display estimate as minutes:seconds ex. 05:22
  }
};

<ng-reading-indicator indicator-options="options"></ng-reading-indicator>

ngReadingIndicator directive

Use ng-reading-indicator directive to display the reading progress on top of the window:

<ng-reading-indicator></ng-reading-indicator>
<ng-reading-indicator indicator-headline="myHeadline" indicator-element=".myArticle" indicator-options="options"></ng-reading-indicator>

If you want to display a different text then the headline use the "indicator-headline"-attribute.

 $scope.myHeadline = 'Lorem Ipsum';

<ng-reading-indicator indicator-headline="myHeadline"></ng-reading-indicator>

If you want to use the progress bar just for one special element use the indicator-element-attribute and insert the classname (only the first element with class will be used, will be extendet to id in future release)

<ng-reading-indicator indicator-element=".myArticle"></ng-reading-indicator>

License

Released under the terms of the MIT License.

Angular-reading-indicator