Стандартный способ,- это подгрузить мини блок и стили для него, а потом скрыть. Для этого устанавливается таймер. Но, а что, если интернет медленный и прелоадер сработает быстрее, чем загрузится сайт?
Ответ
Так тоже можно
$(window).on('load', function() {
$('.preloader').delay(2500).fadeOut('slow');
});
* {
margin: 0;
padding: 0;
}
.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(200, 200, 0, 1);
z-index: 200;
}
.items {
width: 140px;
height: 40px;
padding: 10px;
display: flex;
justify-content: space-around;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.item {
width: 20px;
height: 20px;
border-radius: 50%
}
.item:first-child {
background: blue;
animation: col1 .5s linear infinite;
animation-duration: .3s;
}
.item:nth-child(2) {
background: yellow;
animation: col2 .5s linear infinite;
animation-duration: .4s;
}
.item:nth-child(3) {
background: black;
animation: col3 .5s linear infinite;
animation-duration: .5s;
}
.item:nth-child(4) {
background: pink;
animation: col4 .5s linear infinite;
animation-duration: .6s;
}
.item:nth-child(5) {
background: green;
animation: col5 .5s linear infinite;
animation-duration: .7s;
}
.item:nth-child(6) {
background: violet;
animation: col6 .5s linear infinite;
animation-duration: .8s;
}
@keyframes col1 {
100% {
transform: scale(1.2);
}
}
@keyframes col2 {
100% {
transform: scale(1.2);
}
}
@keyframes col3 {
100% {
transform: scale(1.2);
}
}
@keyframes col4 {
100% {
transform: scale(1.2);
}
}
@keyframes col5 {
100% {
transform: scale(1.2);
}
}
@keyframes col6 {
100% {
transform: scale(1.2);
}
}
.wrapper{
position: relative;
padding:0 30px;
}
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa inventore, deleniti excepturi porro dicta, doloribus quisquam sequi quod ab reprehenderit assumenda? Voluptatibus accusantium aliquam magnam. Praesentium dolore, possimus blanditiis perferendis sit labore incidunt dolores mollitia odio vitae fuga ipsa corporis alias. Amet laboriosam porro et quod. Dolor ullam asperiores voluptatum, alias animi suscipit vel enim ducimus saepe debitis earum natus rerum dicta dolorum hic atque. Voluptate facilis, tempore incidunt minus veniam explicabo aut. Beatae assumenda iure omnis nisi quae at, quisquam porro sunt temporibus sint praesentium! Voluptatum debitis optio ipsum labore nostrum, aperiam ex consequatur laudantium facilis. Dolor dolorum quia, ullam earum, architecto, voluptate accusamus ratione beatae et at a explicabo! Sed, animi nisi. Eos amet atque, quo sit molestiae illo maxime numquam, ipsam quibusdam natus veritatis nemo obcaecati eius voluptate doloremque deleniti, asperiores deserunt! Sequi consectetur rem dolore aliquam optio? Voluptate exercitationem hic eaque consequatur corrupti atque distinctio ratione, veritatis aut id? Error incidunt repellendus eveniet accusamus nihil, culpa dolorum. Quo suscipit doloremque recusandae maiores aliquam vel alias deserunt animi saepe, aperiam cum voluptatibus! Aliquid accusantium eos eaque provident, natus dolores obcaecati fuga illum soluta veniam repellat officia, cupiditate recusandae consequatur sint sed alias possimus dolor beatae! Amet impedit excepturi veritatis illo? Quisquam ea praesentium aspernatur alias corrupti itaque rem aliquam modi? Animi, ipsum nisi. Officiis quam est molestiae? Molestiae placeat voluptas incidunt. Facilis id neque quasi labore, esse optio fugit rerum doloribus voluptas quo provident sunt eligendi magni vitae assumenda animi eos aspernatur! Excepturi odit quasi dicta eos ex, ratione ipsum aspernatur quos, voluptates alias fuga eum quod, nisi magnam nam vitae illum. Magni saepe animi, quaerat ab dolores reiciendis nihil! Enim voluptatibus ex exercitationem alias? Distinctio quia porro earum! Eius laboriosam esse minus aliquam. Quasi ab excepturi reiciendis animi modi? Voluptas adipisci minus aperiam veniam magnam. Voluptatibus.
Комментариев нет:
Отправить комментарий