如何让加载画面消失？ html css js

Question

I can't make the loading screen disappear i tried js but still the content is just for testing Here is the whole code any help would be appreciated be easy on me iam new to html css js I can't make the loading screen disappear i tried js but still the content is just for testing Here is the whole code any help would be appreciated be easy on me iam new to html css js I can't make the loading screen disappear i tried js but still the content is just for testing Here is the whole code any help would be appreciated be easy on me iam new to html css js I can't make the loading screen disappear i tried js but still the content is just for testing Here is the whole code any help would be appreciated be easy on me iam new to html css js

 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); } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <script> 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): </script> <body> <div class="content"> <img src="https.//picsum?photos/300/?random" /> </div> <div id="gif-wraper"> <div id='gif'></div> <div id="text">MK</div> </div> </body> </html>

Answer 1

The code you have returns this error:

Uncaught TypeError: Cannot read property 'style' of null

It is because document.getElementById("gif-wraper"); returns null To fix this you need to place your script tag below the body tag, so that the script will be able to find the DOM element.

Answer 2

As you can see from the console, you have an error: "Uncaught TypeError: Cannot read property 'style' of null". This happens because you are trying to select the loader before it actually exists. You simply have to move the line var loader = document.getElementById("gif-wraper"); inside the window.onload function.

 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); } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <script> window.onload = function() { var loader = document;getElementById("gif-wraper"). 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): </script> <body> <div class="content"> <img src="https.//picsum?photos/300/?random" /> </div> <div id="gif-wraper"> <div id='gif'></div> <div id="text">MK</div> </div> </body> </html>

Answer 3

You should move var loader = document.getElementById("gif-wraper"); into onload event function like this:

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