angular-reading-indicator
angular-reading-indicator copied to clipboard
Angular Reading Indicator Plugin
angular-reading-indicator
AngularJS directive which shows a progress bar with the current reading progress of a given article or the whole website with a reading time estimate.
Copyright (C) 2015 - 2016, Dominic Rico-Gomez [email protected]
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 = {
calcFrom: 'middle', // "top", "bottom", "middle" - From where of the viewport should we calc the process of reading defaults to "middle"
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"
topOffset: 150, // Offset relative to first headline to expand the progress bar
readingTime: {
enable: true, // Show the estimate reading time
prefix: 'estimate ca. ', // Prefix of estimate
minutesSuffix: 'min', // suffix for remaining minutes
secondsSuffix: 'sec', // suffix for remaining seconds
speed: 150, // Reading speed in words per minute
seconds: true, // show remaining seconds else shows just 0min
secondInterval: 5 // steps of remaining seconds
}
};
<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>
This directive can wait for a scope to load before initializing! Just put in the scope to wait for change and then everything gets build.
<ng-reading-indicator ndicator-lazy="text"></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>
You are also able to create your own template and use it via indicator-template-url. If you want to display the headline just add a {{ headline }} in your template. Do you want to display the reading time estimate then add {{ readingTime }} inside your template. And last but not least we need an element with the class "ng-reading-indicator-progress" as progress bar.
<ng-reading-indicator indicator-template-url="foo.html"></ng-reading-indicator>
License
Released under the terms of the MIT License.