Create a preload without jquery

Bootstrap Studio Help
1

I managed to make a model, but it went into looping, it doesn’t return the body to visible.
Remain with the hidden body.

If anyone here has already managed to make one that works in BSS projects, and of course, can share, I’d appreciate it.

2

I got it, but I need to increase the preload time to .4s

The code I’m using is this, if anyone can help me I’d appreciate it.

HTML

<div id="preloader"></div>

CSS

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #ffffff;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 0px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-top-color: var(--bs-dark);
  border-bottom-color: var(--bs-dark);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

JS

(function() {
  "use strict";

  const select = (el, all = false) => {
    el = el.trim()
    if (all) {
      return [...document.querySelectorAll(el)]
    } else {
      return document.querySelector(el)
    }
  }

  /**
   * Preloader
   */
  let preloader = select('#preloader'); 
  if (preloader) {
    window.addEventListener('load', () => {
      preloader.remove()
    });
  }
})()
3

You can try this

  /**
   * Preloader
   */
    
  const removePreloader = () => preloader.remove();
  let preloader = select("#preloader");
  if (preloader) {
    window.addEventListener("load", () => setTimeout(removePreloader, 400));
  }
1 Like
4

It was perfect, thank you very much!
I enabled it for mobile devices only.
Criação de Sites Profissionais - Desenvolvimento de Sites (criacaodesites.bss.design)