How is the visual "hold_action effect" generated?

Configuration Frontend
1

I am referring to the bluish circle that appears after a moment at the point of the click or press when the card has a “hold” action defined. In the picture below, to the left of the icon.

I would like to recreate this effect using HTML, CSS, and JavaScript.

obraz
obraz504×275 15.6 KB

Edit: I found it, it’s defined in action-handler-directive.ts, and here are the properties I was looking for:

.my_hold_indicator {
  position: fixed;
  width: ${this.IS_TOUCH ? '100px' : '50px'};
  height: ${this.IS_TOUCH ? '100px' : '50px'};
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 999;
  background: var(--primary-color);
  opacity: 0.2;
  border-radius: 50%;
  transition: transform 180ms ease-in-out;
}