因為位置：相對 in.progress 但我必須保持相對，如果不是，進度條中的文本會改變如果你運行我的代碼你會看到進度條出現在 predowloading 如果我洗掉相關它會正常但我不想洗掉如果你知道或有任何想法請告訴我謝謝你對不起我的英語
$(window).on("load", function() {
$(".loader-container").fadeOut(1000);
});.loader-container {
width: 100%;
height: 100vh;
background-color: black;
position: fixed;
display: flex;
align-items: center;
justify-content: center;
}
.loader {
width: 50px;
height: 50px;
border: 5px solid;
color: #3498db;
border-radius: 50%;
border-top-color: transparent;
animation: loader 1.2s linear infinite;
}
@keyframes loader {
25% {
color: #2ecc71;
}
50% {
color: #f1c40f;
}
75% {
color: #e74c3c;
}
to {
transform: rotate(360deg);
}
}
.left {
padding-right: 0;
text-align: right;
}
.right {
padding-left: 0;
}
.justify-content-center {
margin-top: 20px;
}
.progress {
margin-bottom: 0;
color: black;
text-align: center;
position: relative;
}
.progress_text {
position: absolute;
left: 0;
right: 0;
color: #000000;
z-index: 1;
}<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="loader-container">
<div class="loader"></div>
</div>
<span>Test</span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
</div>
</div>
</body>
</html>uj5u.com熱心網友回復：
我z-index: 1;向.loader-container.
$(window).on("load", function() {
$(".loader-container").fadeOut(1000);
});.loader-container {
width: 100%;
height: 100vh;
background-color: black;
position: fixed;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.loader {
width: 50px;
height: 50px;
border: 5px solid;
color: #3498db;
border-radius: 50%;
border-top-color: transparent;
animation: loader 1.2s linear infinite;
}
@keyframes loader {
25% {
color: #2ecc71;
}
50% {
color: #f1c40f;
}
75% {
color: #e74c3c;
}
to {
transform: rotate(360deg);
}
}
.left {
padding-right: 0;
text-align: right;
}
.right {
padding-left: 0;
}
.justify-content-center {
margin-top: 20px;
}
.progress {
margin-bottom: 0;
color: black;
text-align: center;
position: relative;
}
.progress_text {
position: absolute;
left: 0;
right: 0;
color: #000000;
z-index: 1;
}<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="loader-container">
<div class="loader"></div>
</div>
<span>Test</span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
</div>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/324896.html
上一篇：表格列寬按內容但不超過50%
下一篇：無法將圖形左對齊