TheLazy.Dev
Portfolio GitHub

Blog

javascript |webdev |tutorial |codepen

Preloader for your website

bawelna0225

Paweł Czarnecki

Posted on May 26, 2022

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>
Enter fullscreen mode Exit fullscreen mode

And our Preloader itself

<div class="preload">
  <div class="circle__1">
  </div>
  <div class="circle__2">
  </div>
  <div class="circle__3">
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

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

&.finished {
  transform: translateY(-100%);
}
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

And delay in preload class

transition-delay: 500ms;
Enter fullscreen mode Exit fullscreen mode

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)
})
Enter fullscreen mode Exit fullscreen mode

Finished preloader looks like this

Image descriptionImage descriptionImage descriptionImage description

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

💖 💪 🙅 🚩
bawelna0225
Paweł Czarnecki

Posted on May 26, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Preloader for your website
javascript Preloader for your website

May 26, 2022