How to make the preloader disappear without using JS

February 8, 2024

I’m just learning how to use CSS and HTML, but my goal is to make a preloader when the page opens: have the .gif animation play once and disappear. I’m doing this for a forum that doesn’t allow scripting, so I don’t have the ability to set up a JS or jQuery script. In the HTML block, it just won’t let me add the tag.

This is also my first time asking a question on this site, so I apologize if I filled out my question illiterately.

My current code:

HTML:

<div class="preloader">
<div class="preloader__image"></div>
</div>

CSS:

<style>
.preloader {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: #fff;
  z-index: 1001;
}

.preloader__image {
  position: relative;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin-top: -32px;
  margin-left: -32px;
  background: url(https://i.ibb.co/37T8DPh/Preloader-1.gif) no-repeat 50% 50%;
}

.loaded_hiding .preloader {
  transition: 0.3s opacity;
  opacity: 0;
}

.loaded .preloader {
  display: none;
}
.preloader-keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}
</style>

I looked at the CSS animation options, but I either didn’t understand how to use this with the .gif condition, or it can’t be done at all…

>Solution :

Welcome to stackoverflow.

One way of using animation and opacity would be :

.preloader__image {
  animation: fadeinout 3s linear forwards;
}

@keyframes fadeinout {
  0% { opacity: 1; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

You can adapt the duration to your needs.
Bear in mind that the image will retain some space, as only the opacity has been modified, so you can play with the z-index, for example.