How is Your Year Loading?

This year has been everything but normal; I think we can all agree on that right!

I see so many people struggling even to remember if it's March or August (It's August 🤟), and I totally feel you!

So, today, let's make a percentage year counter! It will show us how 2020 is loading.

HTML Structure

<div class="container">
  <h1>2020 Loading</h1>
  <h2>We are <i id="percentage">54%</i> there</h2>
  <div class="loader" id="loader">
    <span></span>
  </div>
</div>

We don't need much, we are going to use the I tag to place the percentage in and the loader to show our actual loading bar.

CSS Styling

Now on to our CSS, we use some basic flex center for our container.

.container {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #00bbf9;
}

And this is our loader:

.loader {
  margin-top: 25px;
  width: 200px;
  height: 25px;
  background: #efefef;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
.loader span {
  position: absolute;
  height: 100%;
  width: 0%;
  background: #f15bb5;
  left: 0;
  top: 0;
  transition: width 5s ease-in;
}

As you can see, the div itself is relative, and we position the span absolute, the span will then receive a width and a cool transition so we can see it loading!

JavaScript Year Loader

Onto our actual JavaScript. To start we need to know how far our day is in the year.

var now = new Date();
var start = new Date(now.getFullYear(), 0, 0);
var diff =
  now - start + (start.getTimezoneOffset() - now.getTimezoneOffset()) * 60 * 1000;
var oneDay = 1000 * 60 * 60 * 24;
var day = Math.floor(diff / oneDay);

Oke, what?

So let's start with now we are defining today as an object! Then we need to get the first day of the year, which will be Jan 1st.

If we have both, we can calculate the difference between now and our starting date; we have to add a timezone offset in milliseconds since daylight saving time will not work.

Then we define what one day is "worth" in days. This will return one-day millisecond value.

Then we can simply get our difference / one-day and receive 231 on the 18th of August.

So now we can calculate the percentage of a whole year!

var percentage = Math.floor((day / 365) * 100);

Pretty easy our (day / 365 * 100) = percentage.

Then we need to get all our elements and set our variables.

var loader = document.getElementById('loader');
var loaderBar = loader.querySelector('span');
var percentageText = document.getElementById('percentage');

percentageText.innerHTML = percentage + '%';

setTimeout(function() {
  loaderBar.style.width = percentage + '%';
}, 100);

We set our percentage text and our loader bar width to be our actual percentage.

That's it, see it in action on this Codepen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter