All Projects → Wixel → readingbar

Wixel / readingbar

Licence: MIT license
A simple progress bar that indicates the length & your current reading position of an article/page

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to readingbar

Percircle
⭕️ CSS percentage circle built with jQuery
Stars: ✭ 217 (+1042.11%)
Mutual labels:  jquery-plugin
Modaal
An accessible dialog window library for all humans.
Stars: ✭ 2,702 (+14121.05%)
Mutual labels:  jquery-plugin
Blapy
jQuery plugin that helps you to create and manage ajax and single page web applications (SPA) with almost no javascript coding to do it
Stars: ✭ 30 (+57.89%)
Mutual labels:  jquery-plugin
Jquery Multiselect
Turn a multiselect list into a nice and easy to use list with checkboxes.
Stars: ✭ 221 (+1063.16%)
Mutual labels:  jquery-plugin
Ajax Live Search
AJAX Live Search is a PHP search form that similar to Google Autocomplete feature displays the result as you type.
Stars: ✭ 238 (+1152.63%)
Mutual labels:  jquery-plugin
vicopo
API HTTP et Script pour trouver les villes à partir d'un code postal et code postaux à partir d'une ville
Stars: ✭ 27 (+42.11%)
Mutual labels:  jquery-plugin
Amaranjs
Nice, sleek and stylish notifications.
Stars: ✭ 214 (+1026.32%)
Mutual labels:  jquery-plugin
jquery-jside-menu
jSide Menu is a well designed, simple and clean side navigation menu with dropdowns.
Stars: ✭ 23 (+21.05%)
Mutual labels:  jquery-plugin
Ziptastic Jquery Plugin
This is a jQuery plugin that shows how Ziptastic could be used.
Stars: ✭ 244 (+1184.21%)
Mutual labels:  jquery-plugin
scalem
A jQuery plugin to make any element scalable (responsive).
Stars: ✭ 33 (+73.68%)
Mutual labels:  jquery-plugin
Roundslider
roundSlider - A free jQuery plugin
Stars: ✭ 232 (+1121.05%)
Mutual labels:  jquery-plugin
Jquery Viewer
A jQuery plugin wrapper for Viewer.js.
Stars: ✭ 235 (+1136.84%)
Mutual labels:  jquery-plugin
table2csv
A simple jQuery plugin to convert HTML tables to CSV
Stars: ✭ 32 (+68.42%)
Mutual labels:  jquery-plugin
Magnify
A lightweight jQuery magnifying glass zoom plugin.
Stars: ✭ 218 (+1047.37%)
Mutual labels:  jquery-plugin
Modern.JS
모던 자바스크립트 라이브러리/프레임워크 × KIPFA(한국인터넷전문가협회)
Stars: ✭ 16 (-15.79%)
Mutual labels:  jquery-plugin
Bootstrap Checkbox
A checkbox component based on Bootstrap framework.
Stars: ✭ 214 (+1026.32%)
Mutual labels:  jquery-plugin
ferris-wheel-jquery-plugin
A jquery plugin that adds a cool button to your web page.
Stars: ✭ 13 (-31.58%)
Mutual labels:  jquery-plugin
vidbacking
vidbacking is a jQuery plugin to create HTML5 / Youtube video as background on webpage with fallback image support. It supports mp4 and webm files as well as Youtube video.
Stars: ✭ 55 (+189.47%)
Mutual labels:  jquery-plugin
jquery-tree
jQuery-tree is a jQuery plugin to make an HTML unorder list (ul) in a tree.
Stars: ✭ 29 (+52.63%)
Mutual labels:  jquery-plugin
SyoTimer
jQuery plugin of countdown on html-page
Stars: ✭ 18 (-5.26%)
Mutual labels:  jquery-plugin

readingbar (jQuery plugin)

A simple progress bar that indicates the length & your current reading position of an article/page

alt text

Here's a demo

Adding it to your site

Install it using npm npm install readingbar or download the script file from the repo.

// select the element you wish to track (ie. in a blog post target only the container of the actual post content)
$('.article').readingbar();

Options

// you can set the text indicator, height and the color of the bar.
$('.article').readingbar({
  counter:          false, // Set to `true` if you want to display a % value for progress
  height:           10, // Height of the bar (in px)
  backgroundColor:  '#22252C' // Color of the bar
});

Customize

You can add your own styles by adding properties to the following classes: .read-bar (bar) & .read-text (% text).

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].