вот код
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css\style.css">
</head>
<body>
<div id="page-preloader" class="preloader">
<div class="loader">
<img src="img\VP\logo easy2.png" alt="">
</div>
</div>
<section class="intro">
<video autoplay width="300" src="Untitled.mp4" class="intro__play"></video>
</section>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<script src="js\script.js"></script>
</body>
</html>
.intro__play {
margin-left: 50%;
margin-top: 30%;
transform: translate(-50%, -30%);
}
.preloader {
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: 3;
transition: 1s all;
opacity: 1;
visibility: visible;
}
.loader img{
left: 50%;
top: 50%;
position: absolute;
transform: translate(-50%, -50%);
-webkit-animation: 5s load 1;
}
.done {
opacity: 0;
visibility: hidden;
}
@-webkit-keyframes load {
0%{height: 0px;}
100%{height: 320px;}
}
document.body.onload = function() {
setTimeout(function() {
var preloader = document.getElementById('page-preloader');
if( !preloader.classList.contains('done') )
{
preloader.classList.add('done');
}
}, 1000);
}
Простой
