Пример css и js настраиваемая загрузка полной страницы - PullRequest
Новая
       18

Пример css и js настраиваемая загрузка полной страницы

0 голосов
/ 24 марта 2020

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

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

исходная страница для этого кода анимация загрузки facetwp для охвата всех граней 

(function($) {
  $(document).on('facetwp-refresh', function() {

    if (FWP.loaded) {

      $('#facet-container').prepend('<div class="custom-loader"><i class="fas fa-cog fa-spin"></i><a>Loading...</a></div>');

    }
  });

  $(document).on('facetwp-loaded', function() {
    $('.custom-loader').remove();
  });

})(jQuery);  

#facet-container {
  pointer-events:none;
  position: relative;
}

.custom-loader {
  z-index: 99;
  pointer-events:none;
  display: flex;
  position:fixed;
  padding:0;
  margin:0;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  align-content:center;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:400;
  font-size:20px;
  color: white;
  background-color:rgba(0,0,0,0.7);
  background-size:cover;
  background-repeat: no-repeat;
  -webkit-touch-callout: none; 
  -webkit-user-select: none; 
  -khtml-user-select: none;
  -moz-user-select: none; 
  -ms-user-select: none; 
  user-select: none;     
}

.custom-loader i{
  margin-right:5px;
  margin-left:5px;
}

1 Ответ

0 голосов
/ 24 марта 2020

Вам необходимо добавить встроенный эффект загрузки html и использовать js для их снятия маски. 

<html>
<div id="facet-container">
<div class="custom-loader"><i class="fas fa-cog fa-spin"></i><a>Loading...</a></div>
</div>

<style>
#facet-container {
  pointer-events:none;
  position: relative;
}

.custom-loader {
  z-index: 99;
  pointer-events:none;
  display: flex;
  position:fixed;
  padding:0;
  margin:0;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  align-content:center;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:400;
  font-size:20px;
  color: white;
  background-color:rgba(0,0,0,0.7);
  background-size:cover;
  background-repeat: no-repeat;
  -webkit-touch-callout: none; 
  -webkit-user-select: none; 
  -khtml-user-select: none;
  -moz-user-select: none; 
  -ms-user-select: none; 
  user-select: none;     
}

.custom-loader i{
  margin-right:5px;
  margin-left:5px;
}
</style>

</html>
...