<div id="rjs_cursor" class="rjs-cursor">
  <div class="rjs-cursor-icon"></div>
</div>

.rjs-cursor {
  width: 12px;
  height: 12px;
  position: fixed;      /* Fixed position.. */
  top: 0;               /* at the top left.. */
  left: 0;
  z-index: 999999;      /* above everything else. */
  pointer-events: none; /* Cant't be clicked. */
  transition: none;     /* Cursor is always accurate */
  opacity: 0;        /* Hidden by default */
}

.rjs-cursor-icon {      /* Styling for the visible part */
  width: 100%;
  height: 100%;
  border-radius: 100%;  /* Circle */
  background-color: rgba(123, 123, 123, 0.7); /* Backup value */
}

.rjs-cursor.rjs_cursor_visible { opacity: 1; }
.rjs-cursor.rjs_cursor_hidden { opacity: 0; }




body { min-width: 100vw; min-height: 100vh; margin: 0; }

var rjs_cursor =  document.getElementById("rjs_cursor"); //Getting the cursor
var body =  document.querySelector("body"); //Get the body element

//Functions for showing and hiding the cursor
//They are referenced the 
 function rjs_show_cursor(e) { //Function to show/hide the cursor
    if(rjs_cursor.classList.contains('rjs_cursor_hidden')) {
        rjs_cursor.classList.remove('rjs_cursor_hidden');
    }
    rjs_cursor.classList.add('rjs_cursor_visible');
}

function rjs_hide_cursor(e) {    if(rjs_cursor.classList.contains('rjs_cursor_visible')) {
    rjs_cursor.classList.remove('rjs_cursor_visible');
    }
    rjs_cursor.classList.add('rjs_cursor_hidden');
}


function rjs_mousemove(e) { //Function to correctly position the cursor
    rjs_show_cursor(); //Toggle show/hide
  
    var rjs_cursor_width = rjs_cursor.offsetWidth * 0.5;
    var rjs_cursor_height = rjs_cursor.offsetHeight * 0.5;

    var rjs_cursor_x = e.clientX - rjs_cursor_width; //x-coordinate
    var rjs_cursor_y = e.clientY - rjs_cursor_height; //y-coordinate
    var rjs_cursor_pos = `translate(${rjs_cursor_x}px, ${rjs_cursor_y}px)`;
    rjs_cursor.style.transform = rjs_cursor_pos;
}


//Eventlisteners
 
window.addEventListener('mousemove', rjs_mousemove); //Attach an event listener
body.addEventListener('mouseleave', rjs_hide_cursor);