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

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.

Table of Contents