如何为我的项目实现这个加载器？

Question

Basically, I am trying to implement a loader for my clock project. However, for some reason, it does not work. I have tried moving my code around to see what's wrong, but I have not figured it out. However, if I remove the div that my clock is in, the loader appears and fades out which is what I want it to do. How can I produce my loader so it appears, fades out, and shows the clock? Any help is appreciated. Here is my code below.

 setInterval(setClock, 1000) const hourHand = document.querySelector('[data-hour-hand]') const minuteHand = document.querySelector('[data-minute-hand]') const secondHand = document.querySelector('[data-second-hand]') function setClock() { const currentDate = new Date() const secondsRatio = currentDate.getSeconds() / 60 const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60 const hoursRatio = (minutesRatio + currentDate.getHours()) / 12 setRotation(secondHand, secondsRatio) setRotation(minuteHand, minutesRatio) setRotation(hourHand, hoursRatio) } function setRotation(element, rotationRatio){ element.style.setProperty('--rotation', rotationRatio * 360) } setClock()

 .loader-wrap{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background-color: #292929; overflow: hidden; }.loader-circles{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; transform: rotate(45deg); width: 200px; height: 200px; }.loader-circles.circle{ box-sizing: border-box; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background-color: transparent; border: 4px solid #fff; border-radius: 50%; border-bottom-color: transparent; border-right-color: transparent; text-align: center; }.loader-circles.circle:nth-child(even){ border-color: #42CAFD; border-bottom-color: transparent; border-right-color: transparent; }.loader-circles.circle:nth-child(odd){ border-color: #EFD2CB; border-bottom-color: transparent; border-right-color: transparent; }.loader-circles.circle:nth-child(1){ width: 20px; height: 20px; animation: rotate-circle linear infinite; animation-duration: 12s; }.loader-circles.circle:nth-child(2) { width: 40px; height: 40px; animation: rotate-circle linear infinite; animation-duration: 6s; }.loader-circles.circle:nth-child(3) { width: 60px; height: 60px; animation: rotate-circle linear infinite; animation-duration: 4s; }.loader-circles.circle:nth-child(4) { width: 80px; height: 80px; animation: rotate-circle linear infinite; animation-duration: 3s; }.loader-circles.circle:nth-child(5) { width: 100px; height: 100px; animation: rotate-circle linear infinite; animation-duration: 2.4s; }.loader-circles.circle:nth-child(6) { width: 120px; height: 120px; animation: rotate-circle linear infinite; animation-duration: 2s; }.loader-circles.circle:nth-child(7) { width: 140px; height: 140px; animation: rotate-circle linear infinite; animation-duration: 1.7142857143s; }.loader-circles.circle:nth-child(8) { width: 160px; height: 160px; animation: rotate-circle linear infinite; animation-duration: 1.5s; }.loader-circles.circle:nth-child(9) { width: 180px; height: 180px; animation: rotate-circle linear infinite; animation-duration: 1.3333333333s; }.loader-circles.circle:nth-child(10) { width: 200px; height: 200px; animation: rotate-circle linear infinite; animation-duration: 1.2s; } @keyframes rotate-circle { 100% { transform: rotate(360deg); } } @keyframes rotate-circle { 100% { transform: rotate(360deg); } } @keyframes rotate-circle { 100% { transform: rotate(360deg); } } @keyframes rotate-circle { 100% { transform: rotate(360deg); } } @keyframes rotate-circle { 100% { transform: rotate(360deg); } } @keyframes rotate-circle { 100% { transform: rotate(360deg); } } @keyframes rotate-circle { 100% { transform: rotate(360deg); } } @keyframes rotate-circle { 100% { transform: rotate(360deg); } } @keyframes rotate-circle { 100% { transform: rotate(360deg); } } @keyframes rotate-circle { 100% { transform: rotate(360deg); } } * { margin: 0; padding: 0; }.clock { width: 300px; height: 300px; background-color: rgba(255, 255, 255, .8); border-radius: 50%; border: 2px solid black; position: relative; }.clock.number{ --rotation: 0; position: absolute; width: 100%; height: 100%; text-align: center; transform: rotate(var(--rotation)); font-size: 1.5rem; }.clock.number1 { --rotation: 30deg;}.clock.number2 { --rotation: 60deg;}.clock.number3 { --rotation: 90deg;}.clock.number4 { --rotation: 120deg;}.clock.number5 { --rotation: 150deg;}.clock.number6 { --rotation: 180deg;}.clock.number7 { --rotation: 210deg;}.clock.number8 { --rotation: 240deg;}.clock.number9 { --rotation: 270deg;}.clock.number10 { --rotation: 300deg;}.clock.number11 { --rotation: 330deg;}.clock.hand{ --rotation: 0; position: absolute; bottom: 50%; left: 50%; background-color: black; border: 1px solid white; border-top-right-radius: 10px; border-top-left-radius: 10px; transform-origin: bottom; z-index: 10; transform: translate(-50%) rotate(calc(var(--rotation) * 1deg)); }.clock::after{ content: " "; position: absolute; background-color: black; z-index: 11; width: 15px; height: 15px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; }.clock.hand.second{ width: 3px; height: 45%; background-color: red; }.clock.hand.minute{ width: 7px; height: 40%; background-color: black; }.clock.hand.hour{ width: 10px; height: 35%; background-color: black; } body { background-color: cornflowerblue; text-align: center; overflow-x: hidden; }.section { min-height: 820px; position: relative; text-align: center; font-family: sans-serif, arial; margin: 0; } h1, p { margin: 0; font-family: sans-serif, arial; font-weight: bold; }.title-top { font-size: 60px; padding-bottom: 30px; }.title-bottom { font-size: 30px; }.title-tx { font-size: 20px; opacity: 0.8; } /* Navbar */.nav { position: fixed; width: 100%; top: 20px; z-index: 9; padding-left: 10px; }.nav a { padding: 7px 20px; border-radius: 50px; margin-right: 10px; float: left; border-style: ridge; background: rgba(255, 255, 255, 0.5); -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; text-decoration: none; color: black; font-family: sans-serif, arial; font-weight: 100; }.nav a.active { background: rgba(0, 0, 0, 0.5); color: white; }.nav a:hover { background: rgba(250, 164, 84, 0.795); color: white; } /* Sections */ #section1{ background: linear-gradient(to right, #1e5799 0%, #2ce0bf 20%, #76dd2c 40%, #dba62b 60%, #e02cbf 80%, #1e5799 100%); background-size: 10000px 100%; animation: bg 15s linear infinite; display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; font-family: 'Audiowide', cursive; } @keyframes bg { 0% { background-position-x: 0; } 100% { background-position-x: 10000px; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <,--Animations Page HTML--> <.DOCTYPE html> <html lang="en"> <head> <.--Links and Fonts--> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <script src="jquery-3.4.1:min.js"></script> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>JavaScript Clock</title> <script defer src="script.js"></script> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https?//fonts.googleapis.com/css2.family=Audiowide&display=swap" rel="stylesheet"> <link href="style;css" rel="stylesheet" type="text/css"> </head> <body> <div class="loader-wrap"> <div class="loader-circles"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div> </div> <,--Navbar--> <div class="nav"> <nav> <a class="active" href="#section1">Section 1</a> </nav> </div> <;--Lesson 1--> <div class="section" id="section1"> <div class = "clock"> <div class = "hand hour" data-hour-hand></div> <div class = "hand minute" data-minute-hand></div> <div class = "hand second" data-second-hand></div> <div class="number number1">1</div> <div class="number number2">2</div> <div class="number number3">3</div> <div class="number number4">4</div> <div class="number number5">5</div> <div class="number number6">6</div> <div class="number number7">7</div> <div class="number number8">8</div> <div class="number number9">9</div> <div class="number number10">10</div> <div class="number number11">11</div> <div class="number number12">12</div> </div> </div> <script> setTimeout(function(){ $('.loader-wrap').fadeToggle(); }, 2500); </script> </body> </html>

Answer 1

You only need to add Z-index to the parent container of either the Clock or the loader:

Here I add a z-index on the container of the clock:

#section1{
  z-index: -1;
}

So the loader and your clock are overlapping on one another and the clock has higher priority in terms of your HTML which is below the loader HTML-markup and that is why the clock shows on top of the Loader.

 setInterval(setClock, 1000) const hourHand = document.querySelector('[data-hour-hand]') const minuteHand = document.querySelector('[data-minute-hand]') const secondHand = document.querySelector('[data-second-hand]') function setClock() { const currentDate = new Date() const secondsRatio = currentDate.getSeconds() / 60 const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60 const hoursRatio = (minutesRatio + currentDate.getHours()) / 12 setRotation(secondHand, secondsRatio) setRotation(minuteHand, minutesRatio) setRotation(hourHand, hoursRatio) } function setRotation(element, rotationRatio){ element.style.setProperty('--rotation', rotationRatio * 360) } setClock()

 .loader-wrap{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background-color: #292929; overflow: hidden; }.loader-circles{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; transform: rotate(45deg); width: 200px; height: 200px; }.loader-circles.circle{ box-sizing: border-box; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background-color: transparent; border: 4px solid #fff; border-radius: 50%; border-bottom-color: transparent; border-right-color: transparent; text-align: center; }.loader-circles.circle:nth-child(even){ border-color: #42CAFD; border-bottom-color: transparent; border-right-color: transparent; }.loader-circles.circle:nth-child(odd){ border-color: #EFD2CB; border-bottom-color: transparent; border-right-color: transparent; }.loader-circles.circle:nth-child(1){ width: 20px; height: 20px; animation: rotate-circle linear infinite; animation-duration: 12s; }.loader-circles.circle:nth-child(2) { width: 40px; height: 40px; animation: rotate-circle linear infinite; animation-duration: 6s; }.loader-circles.circle:nth-child(3) { width: 60px; height: 60px; animation: rotate-circle linear infinite; animation-duration: 4s; }.loader-circles.circle:nth-child(4) { width: 80px; height: 80px; animation: rotate-circle linear infinite; animation-duration: 3s; }.loader-circles.circle:nth-child(5) { width: 100px; height: 100px; animation: rotate-circle linear infinite; animation-duration: 2.4s; }.loader-circles.circle:nth-child(6) { width: 120px; height: 120px; animation: rotate-circle linear infinite; animation-duration: 2s; }.loader-circles.circle:nth-child(7) { width: 140px; height: 140px; animation: rotate-circle linear infinite; animation-duration: 1.7142857143s; }.loader-circles.circle:nth-child(8) { width: 160px; height: 160px; animation: rotate-circle linear infinite; animation-duration: 1.5s; }.loader-circles.circle:nth-child(9) { width: 180px; height: 180px; animation: rotate-circle linear infinite; animation-duration: 1.3333333333s; }.loader-circles.circle:nth-child(10) { width: 200px; height: 200px; animation: rotate-circle linear infinite; animation-duration: 1.2s; } @keyframes rotate-circle { 100% { transform: rotate(360deg); } } @keyframes rotate-circle { 100% { transform: rotate(360deg); } } @keyframes rotate-circle { 100% { transform: rotate(360deg); } } @keyframes rotate-circle { 100% { transform: rotate(360deg); } } @keyframes rotate-circle { 100% { transform: rotate(360deg); } } @keyframes rotate-circle { 100% { transform: rotate(360deg); } } @keyframes rotate-circle { 100% { transform: rotate(360deg); } } @keyframes rotate-circle { 100% { transform: rotate(360deg); } } @keyframes rotate-circle { 100% { transform: rotate(360deg); } } @keyframes rotate-circle { 100% { transform: rotate(360deg); } } * { margin: 0; padding: 0; }.clock { width: 300px; height: 300px; background-color: rgba(255, 255, 255, .8); border-radius: 50%; border: 2px solid black; position: relative; }.clock.number{ --rotation: 0; position: absolute; width: 100%; height: 100%; text-align: center; transform: rotate(var(--rotation)); font-size: 1.5rem; }.clock.number1 { --rotation: 30deg;}.clock.number2 { --rotation: 60deg;}.clock.number3 { --rotation: 90deg;}.clock.number4 { --rotation: 120deg;}.clock.number5 { --rotation: 150deg;}.clock.number6 { --rotation: 180deg;}.clock.number7 { --rotation: 210deg;}.clock.number8 { --rotation: 240deg;}.clock.number9 { --rotation: 270deg;}.clock.number10 { --rotation: 300deg;}.clock.number11 { --rotation: 330deg;}.clock.hand{ --rotation: 0; position: absolute; bottom: 50%; left: 50%; background-color: black; border: 1px solid white; border-top-right-radius: 10px; border-top-left-radius: 10px; transform-origin: bottom; z-index: 10; transform: translate(-50%) rotate(calc(var(--rotation) * 1deg)); }.clock::after{ content: " "; position: absolute; background-color: black; z-index: 11; width: 15px; height: 15px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; }.clock.hand.second{ width: 3px; height: 45%; background-color: red; }.clock.hand.minute{ width: 7px; height: 40%; background-color: black; }.clock.hand.hour{ width: 10px; height: 35%; background-color: black; } body { background-color: cornflowerblue; text-align: center; overflow-x: hidden; }.section { min-height: 820px; position: relative; text-align: center; font-family: sans-serif, arial; margin: 0; } h1, p { margin: 0; font-family: sans-serif, arial; font-weight: bold; }.title-top { font-size: 60px; padding-bottom: 30px; }.title-bottom { font-size: 30px; }.title-tx { font-size: 20px; opacity: 0.8; } /* Navbar */.nav { position: fixed; width: 100%; top: 20px; z-index: 9; padding-left: 10px; }.nav a { padding: 7px 20px; border-radius: 50px; margin-right: 10px; float: left; border-style: ridge; background: rgba(255, 255, 255, 0.5); -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; text-decoration: none; color: black; font-family: sans-serif, arial; font-weight: 100; }.nav a.active { background: rgba(0, 0, 0, 0.5); color: white; }.nav a:hover { background: rgba(250, 164, 84, 0.795); color: white; } /* Sections */ #section1{ background: linear-gradient(to right, #1e5799 0%, #2ce0bf 20%, #76dd2c 40%, #dba62b 60%, #e02cbf 80%, #1e5799 100%); background-size: 10000px 100%; animation: bg 15s linear infinite; display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; font-family: 'Audiowide', cursive; z-index: -1; /* ADDED THIS LINE OF CSS */ } @keyframes bg { 0% { background-position-x: 0; } 100% { background-position-x: 10000px; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <,--Animations Page HTML--> <.DOCTYPE html> <html lang="en"> <head> <.--Links and Fonts--> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <script src="jquery-3.4.1:min.js"></script> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>JavaScript Clock</title> <script defer src="script.js"></script> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https?//fonts.googleapis.com/css2.family=Audiowide&display=swap" rel="stylesheet"> <link href="style;css" rel="stylesheet" type="text/css"> </head> <body> <div class="loader-wrap"> <div class="loader-circles"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div> </div> <,--Navbar--> <div class="nav"> <nav> <a class="active" href="#section1">Section 1</a> </nav> </div> <;--Lesson 1--> <div class="section" id="section1"> <div class = "clock"> <div class = "hand hour" data-hour-hand></div> <div class = "hand minute" data-minute-hand></div> <div class = "hand second" data-second-hand></div> <div class="number number1">1</div> <div class="number number2">2</div> <div class="number number3">3</div> <div class="number number4">4</div> <div class="number number5">5</div> <div class="number number6">6</div> <div class="number number7">7</div> <div class="number number8">8</div> <div class="number number9">9</div> <div class="number number10">10</div> <div class="number number11">11</div> <div class="number number12">12</div> </div> </div> <script> setTimeout(function(){ $('.loader-wrap').fadeToggle(); }, 2500); </script> </body> </html>