首頁猿問如何在后臺頁面中間添加引導旋轉圖標？

如何在后臺頁面中間添加引導旋轉圖標？

Html5

慕無忌1623718 2023-11-13 11:05:11

我有一個 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></body></html>

查看完整描述

4 回答

翻過高山走不出你

TA貢獻1875條經驗獲得超3個贊

您必須像這樣刪除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>

</head>

<body>

<span class="sr-only">Loading...</span>

</div>

</body>

</html>

反對回復 2023-11-13

www說

TA貢獻1775條經驗獲得超8個贊

像這樣添加“align-items-center”類。

<span class="sr-only">Loading...</span>

</div>

反對回復 2023-11-13

偶然的你

TA貢獻1841條經驗獲得超3個贊

這是一種直接的方法，對我來說是最好的方法:)

超文本標記語言

</div>

CSS

.myspinner {

height: 100vh;

display:flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

JS 小提琴演示：https://jsfiddle.net/36xrf9mp/5/

反對回復 2023-11-13

FFIVE

TA貢獻1797條經驗獲得超6個贊

這是解決方案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);

}

反對回復 2023-11-13

4 回答
0 關注
209 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何在后臺頁面中間添加引導旋轉圖標？

如何在后臺頁面中間添加引導旋轉圖標？

4 回答

添加回答

如何在后臺頁面中間添加引導旋轉圖標？