css - 将 div 预加载器覆盖到部分元素
问题描述
我需要在元素的中心添加一个 div 预加载article
器!
我不希望这个预加载器扩展到整个主体,因为侧面菜单是静态的!
因此,我希望它只占用article
元素并覆盖 section
元素,直到此部分中的数据准备好在请求后显示。
我创建了一个示例,使用 setTimout 模拟预加载器显示时间。
但是,在示例中,预加载器并未与该部分重叠,而是将其向下推。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Template</title>
<meta name="description" content="Description of site" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="content">
<header id="header">
</header>
<main id="main">
<nav id="nav-left">
</nav>
<article id="article">
<div id="breadcrumb">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Dashboard</li>
</ol>
</nav>
</div>
<div id="preloader" class="page-loader-wrapper">
<div class="loader">
<div class="loader-wheel"></div>
<div class="loader-text"></div>
</div>
</div>
<section id="section"></section>
<footer id="footer">Footer</footer>
</article>
</main>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
let loader = document.getElementById('preloader');
setTimeout(function(){ loader.style.display = 'none'; }, 1500);
</script>
</body>
</html>
<style>
body {
height: 100vh;
width: 100%;
overflow: hidden;
}
#content {
background-color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
}
#header {
border-bottom: 1px solid transparent;
background-color: #404bb3;
color: #fff;
}
@media (min-width: 768px) {
#header {
height: 3.5rem;
}
}
@media (min-width: 768px) {
#main {
height: calc(100vh - 3.5rem);
}
}
#main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: calc(100vh - 3rem);
z-index: 0;
}
@media (min-width: 768px) {
#nav-left {
position: relative;
}
}
#nav-left {
background-color: #fff;
border-right: 1px solid #000;
z-index: 9000;
min-width: 15.625rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
@media (min-width: 768px) {
#article {
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
width: calc(100vw - 15.625rem);
}
}
#article {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
#breadcrumb {
border-bottom: 1px solid #000;
padding: 0 15px;
-webkit-box-flex: 0;
-ms-flex: 0 1 3rem;
flex: 0 1 3rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.breadcrumb {
background-color: transparent;
margin: 0;
padding: 0;
}
/* loading */
.page-loader-wrapper {
align-items: center;
background-color: black;
display: flex;
height: 87%;
justify-content: center;
margin: 0;
opacity: 0.5;
}
.loader {
width: 60px;
}
.loader-wheel {
animation: spin 1s infinite linear;
border: 2px solid rgb(212 216 245);
border-left: 4px solid #404bb3;
border-radius: 50%;
height: 50px;
margin-bottom: 10px;
width: 50px;
}
.loader-text {
color: #404bb3;
font-family: arial, sans-serif;
}
#section {
background-color: #9932cc;
border-bottom: 1px solid #000;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 15px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
}
@media (min-width: 768px) {
#footer {
padding: 0 1rem;
-webkit-box-pack: justify;
-ms- flex-pack: justify;
justify-content: space-between;
}
}
#footer {
font-size: 80%;
-webkit-box-flex: 0;
-ms-flex: 0 1 3rem;
flex: 0 1 3rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
</style>
解决方案
为此,我将执行以下操作:
- 使
section
position: relative;
- 从 DOM 中删除
preloader
,因此仅在需要时添加 - 移动 的
prelaoder
内部section
,因此可以相对于它定位(当它出现时) - 修改
preloader
CSS,使其position: absolute;
// extract preloader from DOM
const preloader = `
<div id="preloader" class="page-loader-wrapper">
<div class="loader">
<div class="loader-wheel"></div>
<div class="loader-text"></div>
</div>
</div>
`
$('#addPreloader').on('click', function() {
// add preloader
$('#section').append(preloader);
// remove preloader after 1500 ms
setTimeout(function() {
$('#preloader').remove()
}, 1500);
})
body {
height: 100vh;
width: 100%;
overflow: hidden;
}
#content {
background-color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
}
#header {
border-bottom: 1px solid transparent;
background-color: #404bb3;
color: #fff;
}
@media (min-width: 768px) {
#header {
height: 3.5rem;
}
}
@media (min-width: 768px) {
#main {
height: calc(100vh - 3.5rem);
}
}
#main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: calc(100vh - 3rem);
z-index: 0;
}
@media (min-width: 768px) {
#nav-left {
position: relative;
}
}
#nav-left {
background-color: #fff;
border-right: 1px solid #000;
z-index: 9000;
min-width: 15.625rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
@media (min-width: 768px) {
#article {
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
width: calc(100vw - 15.625rem);
}
}
#article {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
#breadcrumb {
border-bottom: 1px solid #000;
padding: 0 15px;
-webkit-box-flex: 0;
-ms-flex: 0 1 3rem;
flex: 0 1 3rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.breadcrumb {
background-color: transparent;
margin: 0;
padding: 0;
}
/* loading */
.page-loader-wrapper {
align-items: center;
background-color: black;
display: flex;
justify-content: center;
margin: 0;
opacity: 0.5;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.loader {
width: 60px;
}
.loader-wheel {
animation: spin 1s infinite linear;
border: 2px solid rgb(212 216 245);
border-left: 4px solid #404bb3;
border-radius: 50%;
height: 50px;
margin-bottom: 10px;
width: 50px;
}
.loader-text {
color: #404bb3;
font-family: arial, sans-serif;
}
#section {
background-color: #9932cc;
border-bottom: 1px solid #000;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 15px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
@media (min-width: 768px) {
#footer {
padding: 0 1rem;
-webkit-box-pack: justify;
-ms- flex-pack: justify;
justify-content: space-between;
}
}
#footer {
font-size: 80%;
-webkit-box-flex: 0;
-ms-flex: 0 1 3rem;
flex: 0 1 3rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
<!DOCTYPE html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="content">
<header id="header">
</header>
<main id="main">
<nav id="nav-left">
</nav>
<article id="article">
<div id="breadcrumb">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Dashboard</li>
</ol>
</nav>
</div>
<section id="section"></section>
<footer id="footer">
Footer
<button id="addPreloader">ADD PRELOADER</button>
</footer>
</article>
</main>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
推荐阅读
- gcc - 如何在 linux 上的另一个播放器上安装 pip、gcc、python,因为设备已经满了
- python - 如何通过python在windows中连接NexusDB?
- excel - 如何在打开的工作簿中禁用 SaveAs 但不禁用 Save
- javascript - 在 Python 中下载带有回调的 CSV
- java - 如何在java中将“'”转换为“`”
- time - influxdb连续查询的时间偏移不起作用
- html - 如何使移动菜单响应?
- react-native-android - 如何修复“react-native-spinkit:未指定”
- python - 查找每个唯一值的多列模式
- javascript - 无限滚动显示重复结果