This code creates a countdown timer displayed in a circular format. It visually indicates the time remaining. The timer starts when initiated. It helps create visually appealing countdowns.
You can use this code on websites or applications where you need to display countdown timers. One major benefit is it offers a visually engaging way to show time remaining.
How to Create Bootstrap Countdown Timer Circle
1. First, load the Bootstrap and Font Awesome CSS by adding the following CDN links into the head tag of your HTML document.
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css'> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css'>
2. Create the HTML structure for your countdown timer. Place a <div> element with an id of “revese-timer” where you want the timer to appear on your webpage.
You can adjust the duration of the countdown timer by changing the value of the data-minute attribute in the HTML. For example, data-minute="5" sets the timer to 5 minutes
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="revese-timer" data-minute="1"></div>
</div>
</div>
</div>
3. Copy the following CSS code into your stylesheet or <style> tag in the HTML document. This CSS code contains styles for the circular timer, including its size, colors, and animations.
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap');
button:focus,
input:focus{
outline: none;
box-shadow: none;
}
a,
a:hover{
text-decoration: none;
}
body{
font-family: 'Roboto', sans-serif;
}
/*----------------------*/
.base-timer {
position: relative;
width: 250px;
height: 250px;
margin: auto;
}
.base-timer__svg {
transform: scaleX(-1);
}
.base-timer__circle {
fill: none;
stroke: none;
}
.base-timer__path-elapsed {
stroke-width: 6px;
stroke: #efefef;
}
.base-timer__path-remaining {
stroke-width: 4px;
stroke-linecap: round;
transform: rotate(90deg);
transform-origin: center;
transition: 1s linear all;
fill-rule: nonzero;
stroke: currentColor;
}
.base-timer__path-remaining.green {
color: #39b37d;
}
.base-timer__path-remaining.orange {
color: orange;
}
.base-timer__path-remaining.red {
color: red;
}
.base-timer__label {
position: absolute;
width: 250px;
height: 250px;
top: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
font-weight: 600;
letter-spacing: 0.3px;
}
4. Now, load the jQuery and Bootstrap JS by adding the following CDN links just before closing the body element:
<script src='https://code.jquery.com/jquery-3.4.1.min.js'></script> <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js'></script>
5. Finally, add the following JavaScript code either in a separate file or within <script> tags at the end of your HTML document, just before the closing </body> tag.
// --------Reveser-timer-----------
if ($('#revese-timer').length) {
const FULL_DASH_ARRAY = 283;
const WARNING_THRESHOLD = 20;
const ALERT_THRESHOLD = 15;
const COLOR_CODES = {
info: {
color: "green"
},
warning: {
color: "orange",
threshold: WARNING_THRESHOLD
},
alert: {
color: "red",
threshold: ALERT_THRESHOLD
}
};
var Minute = $('#revese-timer').data('minute');
var Seconds = Math.round(60 * Minute);
const TIME_LIMIT = Seconds;
let timePassed = 0;
let timeLeft = TIME_LIMIT;
let timerInterval = null;
let remainingPathColor = COLOR_CODES.info.color;
document.getElementById("revese-timer").innerHTML = `
<div 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>
</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();
}
}, 1000);
}
function formatTime(time) {
const minutes = Math.floor(time / 60);
let seconds = time % 60;
if (seconds < 10) {
seconds = `0${seconds}`;
}
return `${minutes}:${seconds}`;
}
function setRemainingPathColor(timeLeft) {
const { alert, warning, info } = COLOR_CODES;
if (timeLeft <= alert.threshold) {
document
.getElementById("base-timer-path-remaining")
.classList.remove(warning.color);
document
.getElementById("base-timer-path-remaining")
.classList.add(alert.color);
} else if (timeLeft <= warning.threshold) {
document
.getElementById("base-timer-path-remaining")
.classList.remove(info.color);
document
.getElementById("base-timer-path-remaining")
.classList.add(warning.color);
}
}
function calculateTimeFraction() {
const rawTimeFraction = timeLeft / TIME_LIMIT;
return rawTimeFraction - (1 / TIME_LIMIT) * (1 - rawTimeFraction);
}
function setCircleDasharray() {
const circleDasharray = `${(
calculateTimeFraction() * FULL_DASH_ARRAY
).toFixed(0)} 283`;
document
.getElementById("base-timer-path-remaining")
.setAttribute("stroke-dasharray", circleDasharray);
}
}
You can customize the countdown timer by adjusting the following variables in the JavaScript code:
Minute: Set the duration of the timer in minutes.WARNING_THRESHOLDandALERT_THRESHOLD: Set the thresholds (in seconds) for warning and alert colors respectively.COLOR_CODES: Customize the colors for different time thresholds.
That’s all! hopefully, you have successfully created Bootstrap Countdown Timer Circle. If you have any questions or suggestions, feel free to comment below.
