How to imitate touch cursor (circle) in CSS/JavaScript?

Question

I'm building a website which simulates a mobile device. I'd like to indicate this with a circle for a cursor, similar to when using the Dev Tools in mobile mode.

Is there a standard way to do this in CSS/JavaScript?

Answer 1

Try something like this:

document.addEventListener("mousemove", event => {
  document.getElementsByClassName("cursor")[0].style.transform = "translate(" + event.pageX + "px, " + event.pageY + "px)";
})

document.addEventListener("click", event => {
  document.getElementsByClassName("cursor")[0].classList.add("click")
  setTimeout(() => {
    document.getElementsByClassName("cursor")[0].classList.remove("click")
  }, 250)
})

.cursor {
  width: 0px;
  height: 0px;
  border-radius: 50%;
  background-color: grey;
  position: absolute;
  left: 0px;
  top: 0px;
  opacity: 1;
  transition: all 0s;
}

.cursor.click {
  width: 25px;
  height: 25px;
  left: -12.5px;
  top: -12.5px;
  opacity: 0;
  transition: width 0.25s, height 0.25s, left 0.25s, top 0.25s, opacity 0.25s;
}

Click anywhere to show click cursor!
<div class="cursor"></div>

Answer 2

Its quite simple, no javascript required.

First of all download that round cursor in png or whatever format, then save that file let's say with a name of cursor.png then go to your main css and add this :

*, *::before, *::after {
   cursor : url('cursor.png'),default;
}

If nothing loads it'll load default cursor.

Then, now some webkits for cursor set them too according to you :

-webkit-zoom-in

-webkit-zoom-out

-webkit-zoom-grab

-webkit-zoom-grabbing