Countdown Loading with JS

#css #javascript #webdev #beginners

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.