将加载器置于页面中间

Question

我正试图将这个加载器居中，我从https://cssloaders.github.io/在黑暗背景的页面中间得到。

我目前得到一些奇怪的布局，不知道如何做同样的。

这是。css文件

.bg {
background-color: black;
display: table;
max-height: 100vh;
min-height: 100vh;
}
.loader {
width: 48px;
height: 40px;
margin-top: 30px;
display: inline-block;
position: relative;
background: #000;
border-radius: 15% 15% 35% 35%;
}
.loader::after {
content: '';  
box-sizing: border-box;
position: absolute;
left: 45px;
top: 8px;
border: 4px solid #FFF;
width: 16px;
height: 20px;
border-radius: 0 4px 4px 0;
}
.loader::before {
content: '';  
position: absolute;
width: 1px;
height: 10px;
color: #FFF;
top: -15px;
left: 11px;
box-sizing: border-box;
animation: animloader 1s ease infinite;
}

@keyframes animloader {
0% {
box-shadow: 2px 0px rgba(255, 255, 255, 0), 12px 0px rgba(255, 255, 255, 0.3), 20px 0px rgba(255, 255, 255, 0);
}
50% {
box-shadow: 2px -5px rgba(255, 255, 255, 0.5), 12px -3px rgba(255, 255, 255, 0.5), 20px -2px rgba(255, 255, 255, 0.6);
}
100% {
box-shadow: 2px -8px rgba(255, 255, 255, 0), 12px -5px rgba(255, 255, 255, 0), 20px -5px rgba(255, 255, 255, 0);
}
}

js文件

import React from 'react'
import './styles.css'
const SpinnerComponent = () => {
return (
<div class="bg">
<span class="loader"></span>
</div>
)
}
export default SpinnerComponent

如有任何帮助，不胜感激

Answer 1

.loader和.bg的变化:

.bg {
background-color: black;

max-height: 100vh;
min-height: 100vh;
position: relative;
}
.loader {
width: 48px;
height: 40px;
margin-top: 30px;
display: inline-block;
position: absolute;
background: #000;
border-radius: 15% 15% 35% 35%;
left: 50%;
top: 50%;
transform: translate(-50%, 50%);
}
.loader::after {
content: '';  
box-sizing: border-box;
position: absolute;
left: 45px;
top: 8px;
border: 4px solid #FFF;
width: 16px;
height: 20px;
border-radius: 0 4px 4px 0;
}
.loader::before {
content: '';  
position: absolute;
width: 1px;
height: 10px;
color: #FFF;
top: -15px;
left: 11px;
box-sizing: border-box;
animation: animloader 1s ease infinite;
}

@keyframes animloader {
0% {
box-shadow: 2px 0px rgba(255, 255, 255, 0), 12px 0px rgba(255, 255, 255, 0.3), 20px 0px rgba(255, 255, 255, 0);
}
50% {
box-shadow: 2px -5px rgba(255, 255, 255, 0.5), 12px -3px rgba(255, 255, 255, 0.5), 20px -2px rgba(255, 255, 255, 0.6);
}
100% {
box-shadow: 2px -8px rgba(255, 255, 255, 0), 12px -5px rgba(255, 255, 255, 0), 20px -5px rgba(255, 255, 255, 0);
}
}

<div class="bg">
<span class="loader"></span>
</div>

Answer 2

实现这一目标的最简单方法是将加载器span放在容器div中，并使用flexx将加载器置于页面的中心。

下面是实现它的代码。

.loader {
width: 48px;
height: 48px;
border: 5px solid #FFF;
border-bottom-color: #FF3D00;
border-radius: 50%;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} 
.wrapper{
height:100vh;
display: flex;
align-items: center;
justify-content: center;
}

<div class="wrapper">
<span class="loader"></span>  
</div>

工作示例:https://codepen.io/anubhavmunjaal/pen/YzjZzxP