1

Здравствуйте. Допустим, у нас есть прелоадер и его CSS-свойства:

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

body {
  background:white
}

.preloader {
position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:100px;
  height:100px;
    /* change size for your project */
}
.preloader hr {
  border:0;
  margin:0;
  width:40%;
  height:40%;
  position:absolute;
  animation:spin 3s ease infinite}

.preloader :first-child {
  background:black;
  animation-delay:-1.5s
}
.preloader :nth-child(2) {
  background:grey;
  animation-delay:-1s
}
.preloader :nth-child(3) {
  background:black;
  animation-delay:-0.5s
}

.preloader :last-child {
  background:grey;
}

@keyframes spin{
  0%,100%{transform:translate(0)}
  25%{transform:translate(160%)}
  50%{transform:translate(160%, 160%)}
  75%{transform:translate(0, 160%)}
}
<div class="preloader">
  <hr><hr><hr><hr>
</div>

И теперь вопрос: как сделать так, чтобы наш прелоадер показывался при неполной загрузке страницы, а когда страница полностью загрузилась, скрыть его? onloadи ready я не знаю, как использовать.

2 ответа 2

1

Суть такова, что ты делать прелоадер изначально выше от всех элементов по индексам и позиционируешь фикседом, а когда окно загрузилось скрываешь preloader и контент появился "вуаля" :)

Вот рабочий фиддл https://fiddle.jshell.net/5xwmfp48/

$(document).on('load', function() {
   $('#preloader').hide();
});

//or

$(document).ready(function() {
   $('#preloader').hide();
});
#preloader {
  display: block;
  position: fixed;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader"></div>

1
  • Ответ хороший. Но preloader лучше делать вращающимся :)
    – Eugen Eray
    18 мая 2017 в 17:13
0

Вот если надо то пример:

$(document).ready(function(){
	$("body").addClass("loaded");
});
/* Spinner -START-*/
#loader_wrapper {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 50;}

#loader {display: block; position: relative; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0px 0px -110px; border: 3px solid transparent; border-top-color: #28C900; border-radius: 50%;

animation: spin 2s linear infinite; 
-webkit-animation: spin 2s linear infinite; 
-o-animation: spin 2s linear infinite; 
-ms-animation: spin 2s linear infinite; -moz-animation: spin 2s linear infinite; z-index: 52;}

#loader::before{content: ""; position: absolute; top: 10px; left: 10px; bottom: 10px; right: 10px; border: 3px solid transparent; border-top-color: #3498db; border-radius: 50%; 
	
animation: spin 2.2s linear infinite; 
-webkit-animation: spin 2.2s linear infinite; 
-o-animation: spin 2.2s linear infinite; 
-ms-animation: spin 2.2s linear infinite; 
-moz-animation: spin 2.2s linear infinite; z-index: 52;}

#loader::after{content: ""; position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px; border: 3px solid transparent; border-top-color: #BC00C5; border-radius: 50%; 
	
animation: spin 2.2s linear infinite; 
-webkit-animation: spin 2.2s linear infinite; 
-o-animation: spin 2.2s linear infinite; 
-ms-animation: spin 2.2s linear infinite; 
-moz-animation: spin 2.2s linear infinite; z-index: 52;}

@keyframes spin {
0% {
 -webkit-transform: rotate(0deg);	
 -ms-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 transform: rotate(0deg);
} 
100% {
 -webkit-transform: rotate(360deg);	
 -ms-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 transform: rotate(360deg);	
}
}

@-webkit-keyframes spin {
0% {
 -webkit-transform: rotate(0deg);	
 -ms-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 transform: rotate(0deg);
} 
100% {
 -webkit-transform: rotate(360deg);	
 -ms-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 transform: rotate(360deg);	
}
}

@-moz-keyframes spin {
0% {
 -webkit-transform: rotate(0deg);	
 -ms-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 transform: rotate(0deg);
} 
100% {
 -webkit-transform: rotate(360deg);	
 -ms-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 transform: rotate(360deg);	
}
}

#loader_wrapper .loader-section {position: fixed; top: 0; width: 51%; height: 100%; background-color: #2E0143; z-index: 51;}
#loader_wrapper .loader-section.section-left {left: 0;}
#loader_wrapper .loader-section.section-right {right: 0;}

/* Load finished -START- */

.loaded #loader_wrapper .loader-section.section-left {
	-webkit-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	transform: translateX(-100%);
	-webkit-transition: all 1.9s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -o-transition: all 1.9s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -ms-transition: all 1.9s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -moz-transition: all 1.9s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transition: all 1.9s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000);	
}

.loaded #loader_wrapper .loader-section.section-right {
	-webkit-transform: translateX(100%);
	-o-transform: translateX(100%);
	-ms-transform: translateX(100%);
	-moz-transform: translateX(100%);
	transform: translateX(100%);
	-webkit-transition: all 1.9s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -o-transition: all 1.9s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -ms-transition: all 1.9s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -moz-transition: all 1.9s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transition: all 1.9s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader {opacity: 0;
    -webkit-transition: all 1.4s ease-out;
    -o-transition: all 0.8s ease-out;
    -ms-transition: all 0.8s ease-out;
    -moz-transition: all 0.8s ease-out;
    transition: all 1.2s ease-out;	
}

.loaded #loader_wrapper {visibility: hidden;
    -webkit-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
    -webkit-transition: all 1.9s 1s ease-out;
    -o-transition: all 1.9s 1s ease-out;
    -ms-transition: all 1.9s 1s ease-out;
    -moz-transition: all 1.9s 1s ease-out;
    transition: all 1.9s 1s ease-out;	
}
/* Load finished -END- */
/* Spinner -END-*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<div id="loader_wrapper">
  <div id="loader"></div>
  <div class="loader-section section-left"></div>
  <div class="loader-section section-right"></div>	
</div>

<h1>Hi, gangsta!</h1>

А вот с твоим сниппетом:

$(document).ready(function(){
  $("#preloader_wrapper").fadeOut(3000);
});
body {
  background:white
}

#preloader_wrapper {
 position: absolute;
 width: 100%;
 height: 100%;
 z-index: 20;
 background-color: whitesmoke;
}

.preloader {
position:absolute;
  z-index: 21;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:100px;
  height:100px;
    /* change size for your project */
}
.preloader hr {
  border:0;
  margin:0;
  width:40%;
  height:40%;
  position:absolute;
  animation:spin 3s ease infinite}

.preloader :first-child {
  background:black;
  animation-delay:-1.5s
}
.preloader :nth-child(2) {
  background:grey;
  animation-delay:-1s
}
.preloader :nth-child(3) {
  background:black;
  animation-delay:-0.5s
}

.preloader :last-child {
  background:grey;
}

@keyframes spin{
  0%,100%{transform:translate(0)}
  25%{transform:translate(160%)}
  50%{transform:translate(160%, 160%)}
  75%{transform:translate(0, 160%)}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id="preloader_wrapper">
<div class="preloader">
  <hr><hr><hr><hr>
</div>
</div>

<h1>Hi, gangsta!</h1>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.