DEV Community

Cover image for Countdown Loading with JS
Jatin Sharma
Jatin Sharma

Posted on

Countdown Loading with JS

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

<div class="card">
  <div class="number"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

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);
}

Enter fullscreen mode Exit fullscreen mode

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);

Enter fullscreen mode Exit fullscreen mode

codepen

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.😊👇
buymecoffee

Also Read

Discussion (2)

Collapse
lukeshiru profile image
LUKESHIRU

Ideally you should avoid spinning as the one you added trough the prefers-reduced-motion media feature (more info here). Is dizzying even for me, and I don't usually get dizzy with fast moving UIs.

Collapse
j471n profile image
Jatin Sharma Author

Yeh that could be an approach, Thanks for suggestion :)