Circular Scroll Progress Indicator with jQuery and CSS3 - progressScroll
File Size: | 5.83 KB |
---|---|
Views Total: | 4961 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.