JSFiddle - React, Tailwind, and code Playground

by Reddy Prasad Andhe

HTML

<select id="settings-select-popup-autoclose">
	<option value="-- Select --" selected="selected">-- Select --</option>
	<option value="5">5 seconds</option>
	<option value="10">10 seconds</option>
	<option value="15">15 seconds</option>
	<option value="20">20 seconds</option>
	<option value="25">25 seconds</option>
	<option value="30">30 seconds</option>
	<option value="35">25 seconds</option>
	<option value="40">40 seconds</option>
	<option value="45">45 seconds</option>
	<option value="50">50 seconds</option>
	<option value="55">55 seconds</option>
	<option value="60">60 seconds</option>
</select>
<div id="popupAutoCloseText"></div>

CSS

.base-timer{position:relative;top:10px;width:30px;height:30px;display:inline-block;}
.base-timer__svg{transform:scaleX(-1)}
.base-timer__circle{fill:none;stroke:none}
.base-timer__path-elapsed{stroke-width:7px;stroke:grey}
.base-timer__path-remaining{stroke-width:7px;stroke-linecap:round;transform:rotate(90deg);transform-origin:center;transition:1s linear all;fill-rule:nonzero;stroke:currentColor}
.base-timer__path-remaining.green{color:#41b883}
.base-timer__path-remaining.orange{color:orange}
.base-timer__path-remaining.red{color:red}
.base-timer__label{position:absolute;width:30px;height:30px;top:0;display:flex;align-items:center;justify-content:center;font-size:12px}
body{font-family:Verdana;font-size:16px;padding:50px;}
#popupAutoCloseText{margin-top:10px;}

JavaScript

// Credit: Mateusz Rybczonec

jQuery(document).on('change', '#settings-select-popup-autoclose', function (e) {
	
	jQuery('#popupAutoCloseText #app').remove();

	var __selected_time = jQuery(this).find('option:selected').val();

	const FULL_DASH_ARRAY = 283;
	const WARNING_THRESHOLD = 10;
	const ALERT_THRESHOLD = 5;

	const COLOR_CODES = {
		info: {
			color: "green"
		},
		warning: {
			color: "orange",
			threshold: WARNING_THRESHOLD
		},
		alert: {
			color: "red",
			threshold: ALERT_THRESHOLD
		}
	};

	const TIME_LIMIT = __selected_time;
	let timePassed = 0;
	let timeLeft = TIME_LIMIT;
	let timerInterval = null;
	let remainingPathColor = COLOR_CODES.info.color;

jQuery('#popupAutoCloseText').append(`
            <div id="app">
                <div id="popupAutoCloseText">
                    <span class="timer-text">Popup closes in </span>
                    <span class="base-timer">
                        <svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g class="base-timer__circle"><circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"></circle><path id="base-timer-path-remaining" stroke-dasharray="283" class="base-timer__path-remaining ${remainingPathColor}" d=" M 50, 50 m -45, 0 a 45,45 0 1,0 90,0 a 45,45 0 1,0 -90,0"></path></g></svg>
                        <span id="base-timer-label" class="base-timer__label">${formatTime(timeLeft)}</span>
                    </span>
                    <span class="timer-text">seconds</span>
                </div>
            </div>
        `);

	startTimer();

	function onTimesUp() {
		clearInterval(timerInterval);
	}

	function startTimer() {
		timerInterval = setInterval(() => {
			timePassed = timePassed += 1;
			timeLeft = TIME_LIMIT - timePassed;
			document.getElementById("base-timer-label").innerHTML = formatTime(
				timeLeft
			);
			setCircleDasharray();
			setRemainingPathColor(timeLeft);

			if (timeLeft === 0) {
				onTimesUp();
			}
		},...