DEV Community 👩‍💻👨‍💻

Cover image for Countdown Loading with JS
Jatin Sharma
Jatin Sharma

Posted on • Updated 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

Top comments (2)

Collapse
 
lukeshiru profile image
Luke Shiru

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

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

Hey 😍

Want to help the DEV Community feel more like a community?

Head over to the Welcome Thread and greet some new community members!

It only takes a minute of your time, and goes a long way!