JSFiddle - React, Tailwind, and code Playground

by B L Praveen

HTML

<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="140px" height="140px" >

    <circle cx="105" cy="105" r="100" stroke="#444" stroke-width="5" fill="none"><animate attributename="r" from="100" to="105" dur="0.4s" repeatcount="indefinite"></animate><animate attributename="stroke-opacity" from="1" to="0.02" dur="0.4s" repeatcount="indefinite"></animate></circle>
 </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="210" height="210"><defs><radialGradient cx="50%" cy="50%" r="50%" fx="50%" fy="50%" id="shadow"><stop offset="90%" stop-color="#000" stop-opacity="0"></stop><stop offset="100%" stop-color="#000" stop-opacity="0.4"></stop></radialGradient><clipPath id="mask"><path id="progress_mask" d="" fill="#7b0"></path></clipPath></defs><g><circle cx="105" cy="105" r="100" fill="#333"></circle><rect x="104" y="5" width="2" height="200" fill="#000" fill-opacity="0.5"></rect><rect x="5" y="104" width="200" height="2" fill="#000" fill-opacity="0.5"></rect><circle cx="105" cy="105" r="100" fill="url(#shadow)"></circle><text id="min_text" x="100" y="110" text-anchoor="middle" fill="#fff" style="font-size:24px; font-family:Arial;">0</text><path id="progress" d="" fill="#7b0"></path><rect x="104" y="5" width="2" height="200" fill="#923412" fill-opacity="0.5" clip-path="url(#mask)"></rect><rect x="5" y="104" width="200" height="2" fill="#923412" fill-opacity="0.5" clip-path="url(#mask)"></rect><text id="min_text_mask" x="100" y="110" text-anchoor="middle" fill="#444" style="font-size:24px; font-family:Arial;" clip-path="url(#mask)">0</text><circle cx="105" cy="105" r="100" fill="url(#shadow)" clip-path="url(#mask)"></circle></g><circle cx="105" cy="105" r="100" stroke="#444" stroke-width="2" fill="none"><animate attributename="r" from="100" to="105" dur="0.4s" repeatcount="indefinite"></animate><animate attributename="stroke-opacity" from="1" to="0.02" dur="0.4s" repeatcount="indefinite"></animate></circle></svg>
    <svg...

CSS

.qt_alarm {
    animation:qt_kfalarm 0.6s ease 0s 5;
}

@keyframes qt_kfalarm {
  from { r: 100px;  stroke-opacity: 1; } 
  to   { r : 110px; stroke-opacity: 0;} 
}


.qt_alarm_vib {
    animation: alarm_vib 1s liner 0s 2;
}
@keyframes alarm_vib {
    0%, 100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
    10%, 20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -5deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -5deg)
    }
    30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.15, 1.15, 1.15) rotate3d(0, 0, 1, 5deg);
        transform: scale3d(1.15, 1.15, 1.15) rotate3d(0, 0, 1, 5deg)
    }
    40%, 60%, 80% {
        -webkit-transform: scale3d(1.15, 1.15, 1.15) rotate3d(0, 0, 1, -5deg);
        transform: scale3d(1.15, 1.15, 1.15) rotate3d(0, 0, 1, -5deg)
    }
}