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 2021 is loading.

HTML Structure permalink

<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 permalink

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 permalink

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

const now = new Date();
const start = new Date(now.getFullYear(), 0, 0);
const diff =
  now -
  start +
  (start.getTimezoneOffset() - now.getTimezoneOffset()) * 60 * 1000;
const oneDay = 1000 * 60 * 60 * 24;
const 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!

const 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.

const loader = document.getElementById('loader');
const loaderBar = loader.querySelector('span');
const 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.

See the Pen How is your year loading? by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let’s connect! permalink

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