英文:
Center Spinner on user center screen
问题
我创建了我的第一个旋转器：
#spinner-bg-loading {
position: absolute;
left: 50%;
top: 25%;
width: 80px;
height: 80px;
margin: -75px 0 0 -75px;
border: 16px solid #FFFFFF;
border-radius: 50%;
border-top: 16px solid #1F3A51;
animation: spin 2s linear infinite;
z-index: 10000;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#spinner-bg {
height: 100vw;
width: 100%;
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
display: none;
}
它工作得很好，但我需要进行小的更改。
目前旋转器显示在页面顶部的25%处。当我在长页面的底部时，旋转器是不可见的（因为它在顶部）。
我需要将其显示在用户屏幕的中央，而不是网站的中央。
我该如何修复它？
英文:
I make my firstspinner:
''''
#spinner-bg-loading{
position: absolute;
left: 50%;
top: 25%;
width: 80px;
height: 80px;
margin: -75px 0 0 -75px;
border: 16px solid #FFFFFF;
border-radius: 50%;
border-top: 16px solid #1F3A51;
animation: spin 2s linear infinite;
z-index: 10000;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#spinner-bg {
height: 100vw;
width: 100%;
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
display: none;
}
<div id="spinner-bg">
<div class="container d-flex align-items-center">
<div class="spinner-borderX" role="status">
<span class="sr-only" id="spinner-bg-loading"></span>
</div>
</div>
</div>
''''
It's work fine, but i need small change.
The spinner currently displays 25% from the top. When I am at the bottom of the long page, the spinner is invisible (because it is at the top).
I need show it on user center screen, not to center website.
How can I fix it?
答案1
得分: 2
包含元素的高度应为 100vh，而不是 100vw。
然后，您可以将旋转器本身的 top 和 left 设置为 50%，然后通过 -50% 进行反向平移以获得实际中心。
#spinner-bg-loading {
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
/* 其他 CSS 属性... */
}
#spinner-bg {
height: 100vh;
/* ... */
}
英文:
The height of the containing element should be 100vh, not 100vw.
Then, you can set the top and left of the spinner itself to 50% and translate it back by -50% to get the actual center.
#spinner-bg-loading {
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
/* other CSS properties... */
}
#spinner-bg {
height: 100vh;
/* ... */
}
答案2
得分: 1
You set the spinner_bg height to 100vw, it should be 100vh, and also change the spinner top to 50%
Try This:
#spinner-bg-loading {
position: absolute;
left: 50%;
top: 50%;
width: 80px;
height: 80px;
margin: -75px 0 0 -75px;
border: 16px solid #FFFFFF;
border-radius: 50%;
border-top: 16px solid #1F3A51;
animation: spin 2s linear infinite;
z-index: 10000;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#spinner-bg {
height: 100vh;
width: 100%;
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
display: none;
}
Here's a working example: https://jsfiddle.net/wsnrfb6g/2/
英文:
You set the spinner_bg height to 100vw, it should be 100vh, and also change the spinner top to 50%
Try This:
''''
#spinner-bg-loading{
position: absolute;
left: 50%;
top: 50%;
width: 80px;
height: 80px;
margin: -75px 0 0 -75px;
border: 16px solid #FFFFFF;
border-radius: 50%;
border-top: 16px solid #1F3A51;
animation: spin 2s linear infinite;
z-index: 10000;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#spinner-bg {
height: 100vh;
width: 100%;
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
display: none;
}
<div id="spinner-bg">
<div class="container d-flex align-items-center">
<div class="spinner-borderX" role="status">
<span class="sr-only" id="spinner-bg-loading"></span>
</div>
</div>
</div>
'''
here's a working Example: https://jsfiddle.net/wsnrfb6g/2/
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论