<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; }
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.