猿问

如何在后台页面中间添加引导旋转图标？

我有一个 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
浏览 147回答 4
4回答

翻过高山走不出你

您必须像这样删除display: none并调整顶部位置：&nbsp;.overlay {&nbsp; &nbsp; position: fixed;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; z-index: 1000;&nbsp; &nbsp; top: 40%;&nbsp; &nbsp; left: 0px;&nbsp; &nbsp; opacity: 0.5;&nbsp; &nbsp; filter: alpha(opacity=50);&nbsp;}<html>&nbsp; <head>&nbsp; &nbsp; <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">&nbsp; </head>&nbsp; <body>&nbsp; &nbsp; <div class="overlay">&nbsp; &nbsp; &nbsp; <div class="d-flex justify-content-center">&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <div class="spinner-grow text-primary" role="status" style="width: 3rem; height: 3rem; z-index: 20;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sr-only">Loading...</span>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <!-- here goes the main content -->&nbsp; </body></html>
0

www说

像这样添加“align-items-center”类。<div class="overlay d-flex justify-content-center align-items-center">&nbsp; <div class="">&nbsp;&nbsp;&nbsp; &nbsp; <div class="spinner-grow text-primary" role="status" style="width: 3rem; height: 3rem; z-index: 20;">&nbsp; &nbsp; &nbsp; <span class="sr-only">Loading...</span>&nbsp; &nbsp; </div>&nbsp; </div></div>
0

偶然的你

这是一种直接的方法，对我来说是最好的方法:)超文本标记语言<div class="myspinner">&nbsp; <div class="spinner-border" role="status">&nbsp; </div></div>CSS.myspinner {&nbsp;height: 100vh;&nbsp;display:flex;&nbsp;flex-direction: column;&nbsp;justify-content: center;&nbsp;align-items: center;}JS 小提琴演示：https://jsfiddle.net/36xrf9mp/5/
0

FFIVE

这是解决方案CSS&nbsp; &nbsp; .overlay {&nbsp; &nbsp; &nbsp; &nbsp; background-color: #EFEFEF;&nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; left: 50%;&nbsp; &nbsp; &nbsp; &nbsp; top: 50%;&nbsp; &nbsp; &nbsp; &nbsp; -webkit-transform: translate(-50%, -50%);&nbsp; &nbsp; &nbsp; &nbsp; transform: translate(-50%, -50%);&nbsp; &nbsp; &nbsp; &nbsp; opacity: .5;&nbsp; &nbsp; &nbsp; &nbsp; filter: alpha(opacity=50);&nbsp; &nbsp; }
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答