JSFiddle - React, Tailwind, and code Playground

by Jagi

HTML

<svg version="1.1" id="long-press" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px" xml:space="preserve">
<circle cx="50" cy="50" r="45" /></svg>

CSS

#long-press {
    position: absolute;
    -webkit-transform: translate(-50px,-50px);
    left: 50px; top: 50px;
}
#long-press circle {
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-width: 10px;
    stroke: rgb(90,220,240);
    fill: transparent;
    stroke-dasharray: 450;
    stroke-dashoffset: 170;
    -webkit-animation: long-press 1s linear;
    -webkit-transform-origin: 50px 50px;
    -webkit-transform: rotate(-90deg);
}
@-webkit-keyframes long-press {
    0% { stroke-opacity: 0.5; stroke-dashoffset: 450; }
    100% { stroke-opacity: 1; stroke-dashoffset: 140; }
}