Preloader for your website

In this post I'm going to create easy preloader. In this project I will use HTML, SCSS and a little bit of JavaScript.

We are going to start from adding some content to our page like this one below

<div class="content">
  <h1>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi vero nesciunt modi, incidunt ea similique reiciendis provident eligendi suscipit omnis.</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores odit accusamus ipsa velit consequatur porro dolores at voluptatum. Obcaecati ipsa earum fugit. Rem ad quidem quos vel assumenda aperiam, unde, maxime ipsum natus laborum vero quia consequatur accusamus explicabo ullam aliquid iste similique officiis nihil, voluptate quasi recusandae. Labore voluptas facilis molestias corrupti explicabo mollitia earum cum, eius commodi neque saepe vitae aliquam quis id. Necessitatibus delectus doloribus officia ducimus sequi, error itaque repellat accusantium repellendus? Tenetur repellat obcaecati, perspiciatis accusamus ipsum excepturi nesciunt autem distinctio dolore quis qui facilis necessitatibus dolorum doloribus libero est mollitia saepe minus beatae quae expedita soluta ex ducimus. Blanditiis fugiat non officia illum. Iusto, eos dolores rerum necessitatibus eaque odio, atque, inventore amet neque libero modi ut blanditiis corrupti nam harum repellat soluta officiis tempore iste est natus omnis. Omnis nisi, fugit molestias minus recusandae quos. Reiciendis laudantium dicta natus? Iste eaque placeat cumque adipisci deleniti recusandae, labore velit, totam quaerat, error debitis ipsa ratione neque! Porro suscipit laboriosam minima, possimus facilis esse, rerum, error nesciunt repellat ipsum necessitatibus? Similique, sapiente aliquid. Non quisquam laudantium, ipsa minus eaque laboriosam deserunt neque eveniet quae porro quod, dolor corporis! Praesentium cupiditate, itaque libero eum perspiciatis quod.</p>
</div>

And our Preloader itself

<div class="preload">
  <div class="circle__1">
  </div>
  <div class="circle__2">
  </div>
  <div class="circle__3">
  </div>
</div>

HTML is done now it's time for SCSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 22px;
  font-family: 'Poppins', sans-serif;
}
body{
  background-color: #2e2e2e;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.preload{
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #1b1b1b;
  transition: 400ms linear;
         ...
}
.content{
  margin: 0 auto;
  margin-top: 100px;
  padding: 20px;
  width: min(calc(100% - 2rem), 1000px);
  background-color: #252525;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 8px;
  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.719);
  h1{
    color: lime;
    font-size: 1.4rem;
  }
  p{
    margin-top: 30px;
    color: #b8b8b8;
  }
}

Now we will style our circles using sass for loop

@for $i from 1 through 3 {
  .circle__#{$i} {
    border: 4px solid lime;
    border-radius: 50%;
    position: absolute;
    filter: drop-shadow(0px 0px 5px lime);
    width: calc(250px - $i * 50px);
    aspect-ratio: 1 / 1;
    animation: calc(1.4s - $i * 0.2s) spin linear infinite;
  }
}

And style individual circles

.circle {
  &__1 {
    border-color: lime lime lime transparent;
  }
  &__2 {
    border-color: transparent transparent lime lime;
  }
  &__3 {
    border-color: lime transparent transparent lime;
  }
}

But we still don't have animation so let's add one

@keyframes spin{
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

It's time for JavaScript. We want to remove our preloader after page is loaded

window.addEventListener('load', () => {
  document.querySelector('.preload').classList.add('finished')
})

Let's add style for 'finished' class in preloader

&.finished {
  transform: translateY(-100%);
}

But it doesn't look to good, to fix that we can add some fadeout animation to our circles and delay preloader slide out effect, let's add this loop in finished class

@for $i from 1 through 3 {
  .circle__#{$i} {
    opacity: 0;
    transition: 400ms linear;
  }
}

And delay in preload class

transition-delay: 500ms;

But it's still disappears a little bit to fast, in order to fix that we will use setTimeout in our JS

window.addEventListener('load', () => {
  setTimeout(() => {
    document.querySelector('.preload').classList.add('finished')
  }, 1000)
})

Finished preloader looks like this

All source code you can find Here
or similiar version of this preloader on Codepen