This content originally appeared on DEV Community and was authored by Jatin Sharma
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 -
Now you know how it will look like, So let's look at the code now -
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
: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.
JS
var number = document.querySelector(".number");
var count = 20;
// 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 = count <= 10 ? `0${--count}` : `${--count}`;
}, 1000);
Conclusion
This is the countdown made by using Javascript and CSS you can use this in your project however you want. If you have any suggestions or any query comment down.
You can now extend your support by buying me a Coffee.😊👇
Also Read
This content originally appeared on DEV Community and was authored by Jatin Sharma
Jatin Sharma | Sciencx (2021-12-07T13:17:45+00:00) Countdown Loading with JS. Retrieved from https://www.scien.cx/2021/12/07/countdown-loading-with-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.