如何在后台页面中间添加引导旋转图标？
我有一个 html 页面，在每个页面重新加载时我想显示一个后台加载器图标。我使用了引导微调图标，但无法将其添加到页面中心。
<html>
<style>
.overlay {
background-color:#EFEFEF;
position: fixed;
width: 100%;
height: 100%;
z-index: 1000;
top: 0px;
left: 0px;
opacity: .5;
filter: alpha(opacity=50);
display: none;
}
</style>
<body>
<div class="overlay">
<div class="d-flex justify-content-center">
<div class="spinner-grow text-primary" role="status" style="width: 3rem; height: 3rem; z-index: 20;">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<!-- here goes the main content -->
<!-- here goes the main content -->
</body>
</html>
慕无忌1623718浏览 135回答 4
4回答
-
翻过高山走不出你
您必须像这样删除display: none并调整顶部位置： .overlay { position: fixed; width: 100%; height: 100%; z-index: 1000; top: 40%; left: 0px; opacity: 0.5; filter: alpha(opacity=50); }<html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> </head> <body> <div class="overlay"> <div class="d-flex justify-content-center"> <div class="spinner-grow text-primary" role="status" style="width: 3rem; height: 3rem; z-index: 20;"> <span class="sr-only">Loading...</span> </div> </div> </div> <!-- here goes the main content --> </body></html> -
www说
像这样添加“align-items-center”类。<div class="overlay d-flex justify-content-center align-items-center"> <div class=""> <div class="spinner-grow text-primary" role="status" style="width: 3rem; height: 3rem; z-index: 20;"> <span class="sr-only">Loading...</span> </div> </div></div> -
偶然的你
这是一种直接的方法，对我来说是最好的方法:)超文本标记语言<div class="myspinner"> <div class="spinner-border" role="status"> </div></div>CSS.myspinner { height: 100vh; display:flex; flex-direction: column; justify-content: center; align-items: center;}JS 小提琴演示：https://jsfiddle.net/36xrf9mp/5/ -
FFIVE
这是解决方案CSS .overlay { background-color: #EFEFEF; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: .5; filter: alpha(opacity=50); }
随时随地看视频慕课网APP
相关分类
Html5