Table of Contents
Countdown Loading with JS
Dec 6, 2021
2 min read
319 words
In this article, we are building a countdown with the help of Javascript and CSS. It can also be used as the loading countdown. Let's first look at what are we building -
Preview
Now you know how it will look like, So let's look at the code now -
HTML
index.html
<div class="card">
<div class="number"></div>
</div>
In the HTML code, the card
class is the main container and it has one section as child
number
: it is the main countdown number or value
CSS
styles.css
:root {
--background-color: #0e1538;
--text-color: #fff;
--font: sans-serif;
}
* {
margin: 0;
padding: 0;
}
body {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: var(--background-color);
font-family: var(--font);
}
/* main Card */
.card {
width: 200px;
height: 275px;
position: relative;
user-select: none;
cursor: pointer;
transition: 0.3s ease-in-out;
}
/* Linear Background by using ::before */
.card::before {
content: "";
position: absolute;
top: -4px;
left: -4px;
bottom: -4px;
right: -4px;
transform: skew(2deg, 4deg);
background: linear-gradient(315deg, #00ccff, #0e1538, #d400d4);
}
/* countdown number */
.card > .number {
width: 100%;
height: 100%;
position: absolute;
z-index: 10;
font-size: 8em;
display: grid;
place-items: center;
background-color: var(--background-color);
color: var(--text-color);
}
.card:hover {
transform: scale(1.1);
box-shadow: 0 0 200px rgba(225, 225, 225, 0.3);
transform: rotate(720deg);
}
Now the main part is the javascript in order to run this properly.
Javascript
script.js
var number = document.querySelector(".number");
var count = 10;
// Countdown Interval which runs on every 1s
var countdownInterval = setInterval(() => {
// if count is less than or equal to 1 then clear the Interval
count <= 1 && clearInterval(countdownInterval);
number.textContent = `0${--count}`;
}, 1000);
Wrapping up
This is the countdown made by using Javascript and CSS you can use this in your project however you want.
Jatin's Newsletter
I write monthly Tech, Web Development and chrome extension that will improve your productivity. Trust me, I won't spam you.