在页面加载之前显示 CSS 预加载器覆盖
[英]Show CSS preloader overlay till page is loaded
问题描述
Though there are so many related question, none seems to address the issue of using CSS as a preloader as all are image focused.
尽管有很多相关问题，但似乎没有一个解决使用 CSS 作为预加载器的问题，因为所有问题都以图像为中心。
What i want to achieve is to use the CSS spinner as a preloader and use Javascript to make it disappear after page content is fully loaded, below is the my Code.我想要实现的是使用 CSS 微调器作为预加载器并使用 Javascript 使其在页面内容完全加载后消失，下面是我的代码。 How do i achieve this with Javascript?我如何使用 Javascript 实现此目的？
$(window).on("load", function() { document.getElementByClassName(".loader").style.visibility = "hidden"; });
body, html { background: #111; }.loader { border: 3px solid #d6336c; width: 200px; height: 200px; border-radius: 50%; border-left-color: transparent; border-right-color: transparent; animation: rotate 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite; } #loader2 { border: 3px solid #3bc9db; width: 220px; height: 220px; position: relative; top: -216px; border-left-color: transparent; border-right-color: transparent; animation: rotate2 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite; } #loader3 { border: 3px solid #d6336c; width: 240px; height: 240px; position: relative; top: -452px; border-left-color: transparent; border-right-color: transparent; animation: rotate 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite; } #loader4 { border: 3px solid #3bc9db; width: 260px; height: 260px; position: relative; top: -708px; border-left-color: transparent; border-right-color: transparent; animation: rotate2 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite; } @keyframes rotate { 0% { transform: rotateZ(-360deg) } 100% { transform: rotateZ(0deg) } } @keyframes rotate2 { 0% { transform: rotateZ(360deg) } 100% { transform: rotateZ(0deg) } } #text { color: white; font-family: Arial; font-size: 20px; position: relative; top: -857px; }.center { position: fixed; top: 50%; left: 50%; margin-left: -120px; /* margin is -0.5 * dimension */ margin-top: -85px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta id="viewport-tag" name="viewport" content="width=device-width. initial-scale=1" /> <title> CSS3 Loading spinner</title> </head> <body> <div class="center"> <center> <div class="loader" id="loader"></div> <div class="loader" id="loader2"></div> <div class="loader" id="loader3"></div> <div class="loader" id="loader4"></div> <span id="text">LOADING...</span></center> </div> <!-- Display below after loading --> <!-- partial --> <h2> <font color="white">Hello Everyone Main Webiste Content goes here</font> </h2> </body> </html>
1 个解决方案
解决方案1
0 2021-10-10 16:21:08
getElementByClassName - returns a collection of elements, you need to loop the same and set the visibility property getElementByClassName - 返回元素的集合，您需要循环相同的元素并设置可见性属性
$(window).on("load", function() { if(document.getElementsByClassName("loader")) { var k = document.getElementsByClassName("loader"); for (let el of k) { el.style.visibility = "hidden"; } } });
body, html { background: #111; }.loader { border: 3px solid #d6336c; width: 200px; height: 200px; border-radius: 50%; border-left-color: transparent; border-right-color: transparent; animation: rotate 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite; } #loader2 { border: 3px solid #3bc9db; width: 220px; height: 220px; position: relative; top: -216px; border-left-color: transparent; border-right-color: transparent; animation: rotate2 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite; } #loader3 { border: 3px solid #d6336c; width: 240px; height: 240px; position: relative; top: -452px; border-left-color: transparent; border-right-color: transparent; animation: rotate 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite; } #loader4 { border: 3px solid #3bc9db; width: 260px; height: 260px; position: relative; top: -708px; border-left-color: transparent; border-right-color: transparent; animation: rotate2 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite; } @keyframes rotate { 0% { transform: rotateZ(-360deg) } 100% { transform: rotateZ(0deg) } } @keyframes rotate2 { 0% { transform: rotateZ(360deg) } 100% { transform: rotateZ(0deg) } } #text { color: white; font-family: Arial; font-size: 20px; position: relative; top: -857px; }.center { position: fixed; top: 50%; left: 50%; margin-left: -120px; /* margin is -0.5 * dimension */ margin-top: -85px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta id="viewport-tag" name="viewport" content="width=device-width. initial-scale=1" /> <title> CSS3 Loading spinner</title> </head> <body> <div class="center"> <center> <div class="loader" id="loader"></div> <div class="loader" id="loader2"></div> <div class="loader" id="loader3"></div> <div class="loader" id="loader4"></div> <span id="text" class="loader">LOADING...</span></center> </div> <!-- Display below after loading --> <!-- partial --> <h2> <font color="white">Hello Everyone Main Webiste Content goes here</font> </h2> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
显示加载程序，直到整个页面完全加载到asp.net中 - show loader till whole page is loaded completely in asp.net
加载叠加层直到页面呈现 - Load overlay till page is rendered
ReactJS - 在加载图像之前显示预加载器 - ReactJS - Show a preloader before the image is loaded
Wordpress 中的自定义 CSS 页面预加载器 - Custom Css Page Preloader in Wordpress
将 CSS 预加载器添加到动态页面加载器 - Adding a CSS preloader to Dynamic Page loader
页面加载后带有 css 和 jquery 加载器的预加载器 - Preloader with css and jquery loader after page load
如何只显示一次页面预加载器 - How to show page preloader only once
材质CSS-页面加载后停止预加载器 - Material CSS - Stop preloader after page load
在Framework7中显示/隐藏页面加载时的预加载器 - Show / hide preloader on page load in Framework7
当我单击一个链接时，它必须显示“正在加载动画”，直到加载另一个页面为止，该怎么做？ - when I click on a link it has to show “some loading animation” till another page is loaded,how to do that?
相关标签