Как заставить загрузочный экран исчезнуть? HTML CSS JS ⇐ CSS

[Anonymous]

Я не могу сделать экран загрузки исчезнуть, я попробовал js, но все же контент просто для тестирования, здесь - это целый код, который будет признательен, что будет легким для меня. исчезнуть я попробовал js, но все же контент просто для тестирования, вот весь код, любой справка, была бы оценена для меня легкой, я не буду новым для HTML CSS JS
Я не могу сделать экран загрузки исчезнуть, я попробовал js, но все же контент просто для тестирования, вот весь код, который будет признательен к составу. Class = "Snippet-Code">

Код: Выделить всё

body {
width: 100%;
height: 100%;
background: wheat;
}

.content {
display: flex;
position: absolute;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}

#gif-wraper {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
}

#gif {
display: flex;
background: black;
padding: 10px;
height: 80px;
width: 80px;
border-radius: 50%;
position: fixed;
top: calc(50% - 40px);
left: calc(50% - 40px);
box-shadow: 178px 0 0 -25px black, 178px 0 0 -20px white, -178px 0 0 -25px black, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
-webkit-animation: rotate 3s linear infinite;
animation: rotate 3s linear infinite;
transition: opacity 0.3s linear;
}

#text {
font-family: 'Times New Roman', Times, serif;
position: fixed;
display: block;
top: calc(52% - 10px);
left: calc(50% - 10px);
right: calc(50% - 1px);
transform: translate(-50%, -50%);
/*box-shadow: black, white;*/
font-size: 30px;
}

#gif::before {
content: " ";
position: fixed;
height: 50px;
width: 50px;
border-radius: 50%;
top: -155px;
left: 20px;
background: black;
border: 5px solid white;
box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;
-webkit-animation: reverseRotate 3s linear infinite;
animation: reverseRotate 3s linear infinite;
}

#gif::after {
/* Segmented circle code goes here */
content: " ";
position: fixed;
height: 280px;
width: 280px;
left: -90px;
top: -90px;
background-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSAiaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDEwMCAxMDAiID4NCiAgICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlLWRhc2hhcnJheT0iMC45NTIiIHN0cm9rZS13aWR0aD0iOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIvPg0KPC9zdmc+");
background-repeat: no-repeat;
z-index: 2;
-webkit-animation: segmentRotate 300s linear infinite;
animation: segmentRotate 300s linear infinite;
}

@keyframes rotate {
0% {
transform: rotate( 0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 178px 0 0 -25px black, 178px 0 0 -20px white, -178px 0 0 -25px black, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 178px 0 0 -25px white, 178px 0 0 -20px white, -178px 0 0 -25px white, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
100% {
transform: rotate(360deg);
}
}

@keyframes reverseRotate {
0% {
transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white;
}
100% {
transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg);
}
}

@keyframes segmentRotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-32000deg);
}
}

@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate( 0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 178px 0 0 -25px black, 178px 0 0 -20px white, -178px 0 0 -25px black, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 178px 0 0 -25px white, 178px 0 0 -20px white, -178px 0 0 -25px white, -178px 0 0 -20px white, 0 0 0 20px black, 0 0 0 30px white, 0 0 0 130px black, 0 0 0 135px white;
}
100% {
-webkit-transform:  rotate(360deg);
}
}

@-webkit-keyframes reverseRotate {
0% {
-webkit-transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg);
}
10%,
15%,
35%,
40%,
60%,
65%,
85%,
90% {
background: black;
box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white;
}
12.5%,
37.5%,
62.5%,
87.5% {
background: white;
box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white;
}
100% {
-webkit-transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg);
}
}

@-webkit-keyframes segmentRotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-32000deg);
}
}< /code>






Document



var loader = document.getElementById("gif-wraper");
window.onload = function() {
loader.style.display = 'none';
}
var x = 0;

function changeColor() {
var txtclr = document.getElementById("text");
var clr = ["black", "white"];
txtclr.style.color = clr[x];
x = (x + 1) % clr.length;
}
setInterval(changeColor, 300);




[img]https://picsum.photos/300/?random[/img]


MK

Подробнее здесь: https://stackoverflow.com/questions/655 ... tml-css-js