Полноэкранный загрузчик по центру затухания

поэтому я относительно новичок в программировании, и я хотел создать загрузчик, который всякий раз, когда страница загружается или обновляется, показывает центрированную анимацию загрузки, которая становится серой и исчезает вся страница, а затем все возвращается к норме, когда страница полностью загружается.

мне удалось заставить все остальное работать, кроме центрирования анимации и затухания / серого цвета страницы. idk, если я упускаю что-то действительно очевидное, но я искал везде, и я не совсем получил то, что хотел.

вот html

<!DOCTYPE html>
<html lang = "en">
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "style.css">
<script src = "script.js"></script>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<head>
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <title>S&B Clothes</title>
    <link rel = "icon" type = "image/x-icon" href = "logo/icons8-needle-96.png">
</head>

<body id = "body">

<!--Navbar-->

  <nav class = "navbar navbar-expand-sm sticky-top" id = "navbar1">
    <div class = "container-fluid">
      <a class = "navbar-brand" href = "index.html">
        <img src = "logo/logo_svg.svg" class = "rounded" id = "navbar_logo">
      </a>
      <button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#men_women">
        <div class = "container_menu" onclick = "menu(this)">
          <div class = "bar1"></div>
          <div class = "bar2"></div>
          <div class = "bar3"></div>
        </div> 
      </button>
      <div class = "collapse navbar-collapse" id = "men_women">
        <ul class = "navbar-nav me-auto">
          <li class = "nav-item">
            <button type = "button" class = "btn" onclick = "women_index_fn()" id = "navbar_men">Women</button>
          </li>
          <li>
            <vr class = "vr"></vr>
          </li>
          <li class = "nav-item">
            <button type = "button" class = "btn" onclick = "children_index_fn()" id = "navbar_women">Children</button>
          </li>
        </li>
        <li>
          <vr class = "vr"></vr>
        </li>
        <li class = "nav-item">
          <button type = "button" class = "btn" onclick = "men_index_fn()" id = "navbar_children">Men</button>
        </li>
        </ul>
      </div>
      <div class = "input-group rounded">
        <input type = "search" class = "form-control rounded" placeholder = "Search" aria-label = "Search" aria-describedby = "search-addon" />
        <button type = "button" class = "btn rounded" id = "src_btn">Search</button>
      </div>
      <div>
        <button class = "btn" id = "user_btn" onmouseover = "change_img_user()" onmouseout = "change_img_user_2()">
          <img src = "Icons/user-white.png" id = "user_btn_ico"/>
        </button>
      </div>
      <div>
        <button class = "btn" id = "favorite_btn" onmouseover = "change_img_fav()" onmouseout = "change_img_fav_2()">
          <img src = "Icons/favorite-white.png" id = "favorite_btn_ico"/>
        </button>
      </div>
      <div>
        <button class = "btn" id = "shop_cart_btn" onmouseover = "change_img_cart()" onmouseout = "change_img_cart_2()">
          <img src = "Icons/shopping-cart-white.png" id = "shop_cart_ico"/>
        </button>
      </div>
    </div>
  </nav>

<!--Loader-->

  <div class = "preloader" id = "ld">
    <div class = "box">
      <div class = "box__inner">
        <div class = "box__back-flap"></div>
        <div class = "box__right-flap"></div>
        <div class = "box__front-flap"></div>
        <div class = "box__left-flap"></div>
        <div class = "box__front"></div>
      </div>
    </div>
    <div class = "box">
      <div class = "box__inner">
        <div class = "box__back-flap"></div>
        <div class = "box__right-flap"></div>
        <div class = "box__front-flap"></div>
        <div class = "box__left-flap"></div>
        <div class = "box__front"></div>
      </div>
    </div>
    <div class = "line">
      <div class = "line__inner"></div>
    </div>
    <div class = "line">
      <div class = "line__inner"></div>
    </div>
    <div class = "line">
      <div class = "line__inner"></div>
    </div>
    <div class = "line">
      <div class = "line__inner"></div>
    </div>
    <div class = "line">
      <div class = "line__inner"></div>
    </div>
    <div class = "line">
      <div class = "line__inner"></div>
    </div>
    <div class = "line">
      <div class = "line__inner"></div>
    </div>

вот js

window.addEventListener("load", function()
{
  var loader = document.getElementById("ld");
  loader.style.display = "none";
})

все, что я сделал до сих пор, это просто стиль загрузчика и раскраска, ничего не связанного с позиционированием.

я попытался поместить свой загрузчик в контейнер и отцентрировать его, но это не сработало, как планировалось, и панель навигации не стала серой

Спасибо вам всем

javascript html css bootstrap-5

07.02.2023 21:53

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Хорошо, вы спрашиваете, как создать наложение и центрировать загрузочный виджет посередине экрана. Есть много способов сделать это, вот один из них.

function removeOverlay() {
  const overlay = document.querySelector('#overlay');
  overlay.classList.remove('show');
  document.body.style.overflow = 'auto';
 }

body {
overflow: hidden;
}

#overlay {
  background-color: rgba(255,255,255,0.7);
  display: none;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

#overlay.show {
  display: block;
}

#overlay-container {
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  height: 100%;
}

<article>
    <header><h2>My Article</h2></header>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
    </p>
    </article>
    
    <div id = "overlay" class = "show">
      <div id = "overlay-container">
       <h3>Loading ...</h3>
       <p>Place your loading widget in the overlay-container</p>
       <button onclick = "removeOverlay()">Remove Overlay</button>
      </div>
    </div>

во-первых, я хотел бы поблагодарить вас за вашу помощь, я только что столкнулся с небольшой проблемой. серое наложение, кажется, не покрывает всю страницу, поэтому, когда оно загружается, нижняя часть не покрыта

— 08.02.2023 21:56

@Bilal В css для #overlay попробуйте следующее: удалите «bottom: 0» и добавьте «height: 100vh». Возможно, ваш #overlay div помещен в контейнер с «положением: относительно». Элемент с «position: absolute» ограничен границами своего родителя, если у родителя есть «position: relative»

— 10.02.2023 02:29

@Bilal Я только что увидел, что в моем примере оверлей обрезается внизу экрана, но высота прокрутки больше, поэтому нижняя часть содержимого не закрыта. Я исправлю свой пример.

— 10.02.2023 02:31

@Bilal Хорошо, я исправил это. В css я добавил к тегу body свойство «overflow: hidden», которое предотвращает прокрутку. Затем в функции removeOverlay() я установил для переполнения тега body значение «auto».

— 10.02.2023 02:40

08.02.2023 05:14