Circular Scroll Progress Indicator with jQuery and CSS3 - progressScroll

progressScroll is a tiny jQuery plugin to create a CSS3 powered circular scroll progress indicator that auto updates based on the current vertical scroll position of the page.

See also:

• Creating A Circular Reading Progress Indicator with jQuery and SVG
• jQuery Plugin For Simple Scroll Position Indicator - Scrolline.js
• jQuery Plugin To Display A Reading Progress Indicator On Scroll

How to use it:

1. Include jQuery JavaScript library and the jQuery progressScroll plugin at the bottom of the page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.progressScroll.min.js"></script>

2. Create a container for the scroll progress indicator.

<div class="progressCounter"></div>

3. Initialize the plugin and we're done. The plugin will auto detect the scroll position relative to the whole webpage and update the indicator using CSS3 transforms.

$(".progressCounter").progressScroll();

4. Customize the scroll progress indicator during initialization.

// width of the scroll indicator
width: 100,

// height of the scroll indicator
height: 100,

// borer size
borderSize: 10,

// background color
mainBgColor: "#E6F4F7",

// main border color
lightBorderColor: "#A2ECFB",

// filled border color
darkBorderColor: "#39B4CC",

// font size
fontSize: "30px"

---

This awesome jQuery plugin is developed by melbon. For more Advanced Usages, please check the demo page or visit the official website.