Customized Cursor With Scroll Progress Indicator

An interactive customized cursor that routinely fills the circle to point the present scroll place.

The way to use it:

1. Code the HTML for the customized cursor & scroll place indicator.

<div class="cursor" id="cursor"></div>
<div class="cursor2" id="cursor2">          
<div class="progress-wrap">
  <svg class="progress-circle svg-content" width="100%" peak="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 required CSS types for the customized cursor.

.cursor,
.cursor2,
.cursor3{
  place: mounted;
  border-radius: 50%; 
  remodel: translateX(-50%) translateY(-50%);
  pointer-events: none;
  left: -100px;
  prime: 50%;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}
.cursor{
  background-color: #fff;
  z-index: 99999;
  peak: 0;
  width: 0;
}
.cursor2,.cursor3{
  peak: 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%);
  remodel: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;
}

3. Fashion the scroll place indicator.

.progress-wrap {
  peak: 46px;
  width: 46px;
  cursor: pointer;
  show: 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: var(--grey);
  stroke-width: 4;
  box-sizing: border-box;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

4. Load the required jQuery library on the finish of the doc.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

5. The principle JavaScript to activate the customized cursor & scroll place indicator.

(operate($) { "use strict";

  // Web page cursors

    doc.getElementsByTagName("physique")[0].addEventListener("mousemove", operate(n) {
      t.fashion.left = n.clientX + "px", 
      t.fashion.prime = n.clientY + "px", 
      e.fashion.left = n.clientX + "px", 
      e.fashion.prime = n.clientY + "px", 
      i.fashion.left = n.clientX + "px", 
      i.fashion.prime = n.clientY + "px"
    });
    var t = doc.getElementById("cursor"),
        e = doc.getElementById("cursor2"),
        i = doc.getElementById("cursor3");
    operate n(t) {
        e.classList.add("hover"), i.classList.add("hover")
    }
    operate s(t) {
        e.classList.take away("hover"), i.classList.take away("hover")
    }
    s();
    for (var r = doc.querySelectorAll(".hover-target"), a = r.size - 1; a >= 0; a--) {
        o(r[a])
    }
    operate o(t) {
        t.addEventListener("mouseover", n), t.addEventListener("mouseout", s)
    }
    
  $(doc).prepared(operate(){"use strict";
  
    //Scroll indicator
    
    var progressPath = doc.querySelector('.progress-wrap path');
    var pathLength = progressPath.getTotalLength();
    progressPath.fashion.transition = progressPath.fashion.WebkitTransition = 'none';
    progressPath.fashion.strokeDasharray = pathLength + ' ' + pathLength;
    progressPath.fashion.strokeDashoffset = pathLength;
    progressPath.getBoundingClientRect();
    progressPath.fashion.transition = progressPath.fashion.WebkitTransition = 'stroke-dashoffset 10ms linear';    
    var updateProgress = operate () {
      var scroll = $(window).scrollTop();
      var peak = $(doc).peak() - $(window).peak();
      var progress = pathLength - (scroll * pathLength / peak);
      progressPath.fashion.strokeDashoffset = progress;
    }
    updateProgress();
    $(window).scroll(updateProgress);
    
  });
  
})(jQuery);

This superior jQuery plugin is developed by ig_design. For extra Superior Usages, please test the demo web page or go to the official web site.