Reading Progress Indicator That Follows Your Cursor

A jQuery/CSS/SVG based circular reading progress indicator that automatically updates on page scroll and always follows your cursor.

How to use it:

1. Build the HTML for the custom cursor (circular reading progress indicator).

<div class="cursor" id="cursor"></div>
  <div class="cursor2" id="cursor2">          
    <div class="progress-wrap">
      <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
        <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
      </svg>
    </div>
  </div>
<div class="cursor3" id="cursor3"></div>

2. The necessary CSS/CSS3 styles for the progress bar.

.progress-wrap {
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  box-shadow: inset  0 0 0 2px rgba(255,255,255,0.2);
  z-index: 10000;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.progress-wrap svg path { 
  fill: none; 
}

.progress-wrap svg.progress-circle path {
  stroke: #ecedf3;
  stroke-width: 4;
  box-sizing: border-box;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

3. The necessary CSS/CSS3 styles for the custom cursor.

.cursor,
.cursor2,
.cursor3 {
  position: fixed;
  border-radius: 50%; 
  transform: translateX(-50%) translateY(-50%);
  pointer-events: none;
  left: -100px;
  top: 50%;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

.cursor{
  background-color: #fff;
  z-index: 99999;
  height: 0;
  width: 0;
}

.cursor2,.cursor3{
  height: 46px;
  width: 46px;
  z-index:99998;
  -webkit-transition:all 0.3s ease-out;
  transition:all 0.3s ease-out
}

.cursor2.hover,
.cursor3.hover{
  -webkit-transform:scale(1.4) translateX(-35%) translateY(-35%);
  transform:scale(1.4) translateX(-35%) translateY(-35%);
  border:none
}
.cursor2.hover{
  background: rgba(255,255,255,0.1);
}

.cursor2.hover .progress-wrap {
  box-shadow: inset  0 0 0 2px rgba(255,255,255,0);
}

.cursor2.hover .progress-wrap svg.progress-circle path {
  opacity: 0.4;
}

4. Import the latest jQuery JavaScript library into the document.

<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>

5. The main JavaScript for the custom cursor.

document.getElementsByTagName("body")[0].addEventListener("mousemove", function (n) {
  t.style.left = n.clientX + "px",
  t.style.top = n.clientY + "px",
  e.style.left = n.clientX + "px",
  e.style.top = n.clientY + "px",
  i.style.left = n.clientX + "px",
  i.style.top = n.clientY + "px";
});
var t = document.getElementById("cursor"),
e = document.getElementById("cursor2"),
i = document.getElementById("cursor3");
function n(t) {
  e.classList.add("hover"), i.classList.add("hover");
}
function s(t) {
  e.classList.remove("hover"), i.classList.remove("hover");
}
s();
for (var r = document.querySelectorAll(".hover-target"), a = r.length - 1; a >= 0; a--) {
  o(r[a]);
}
function o(t) {
  t.addEventListener("mouseover", n), t.addEventListener("mouseout", s);
}

6. The main JavaScript for the reading progress indicator.

$(document).ready(function () {"use strict";

  var progressPath = document.querySelector('.progress-wrap path');
  var pathLength = progressPath.getTotalLength();
  progressPath.style.transition = progressPath.style.WebkitTransition = 'none';
  progressPath.style.strokeDasharray = pathLength + ' ' + pathLength;
  progressPath.style.strokeDashoffset = pathLength;
  progressPath.getBoundingClientRect();
  progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear';
  var updateProgress = function () {
    var scroll = $(window).scrollTop();
    var height = $(document).height() - $(window).height();
    var progress = pathLength - scroll * pathLength / height;
    progressPath.style.strokeDashoffset = progress;
  };
  updateProgress();
  $(window).scroll(updateProgress);

});

---

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