无法管理中心加载程序
问题描述：
我在我的应用程序中使用加载程序，但无法正确对中。无法管理中心加载程序
正如你将看到它稍微移动到屏幕的左侧。
这里的小提琴：Loader
这里的HTML代码：
<div class="loader">
<div class="loader__hexagon loader__hexagon--value"></div>
<div class="loader__hexagon loader__hexagon--value"></div>
<div class="loader__hexagon loader__hexagon--value"></div>
</div>
这里的SCSS代码：
.loader-graph-default{
background-color: black;
display: none;
}
.loader-graph-loading{
display: inline;
position: absolute;
z-index: 100;
height: 100%;
width: 100%;
}
.loader {
background: none;
position: relative;
width: 60px;
height: 60px;
margin: auto;
text-align: center;
&__hexagon {
position: absolute;
width: 12px;
height: 20px;
margin: 5px;
transform: rotate(30deg);
animation: fade 1s infinite;
animation-delay: 0s;
background: white;
&--value {
background: #009ECB;
}
&:first-of-type {
top: 20px;
left: -12px;
animation-delay: .4s;
}
&:last-of-type {
top: 20px;
left: 12px;
animation-delay: .2s;
}
&:before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 12px;
height:20px;
background: inherit;
transform: rotate(-62deg);
}
&:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 12px;
height: 20px;
background: inherit;
transform: rotate(62deg);
}
}
}
@keyframes fade{
0%{
opacity: 1;
}
50%{
opacity: .1;
}
100%{
opacity: 1;
}
}
如果你去拨弄，你检查的分度， class“loader”你可以看到它没有居中。
我缺少什么？
答
您可以将loader宽度60px设置为48px来解决此问题。检查以下更新片断..
.loader-graph-default {
background-color: black;
display: none;
}
.loader-graph-loading {
display: inline;
position: absolute;
z-index: 100;
height: 100%;
width: 100%;
}
.loader {
background: none;
position: relative;
width: 48px;
height: 60px;
margin: auto;
text-align: center;
left: 12px;
}
.loader__hexagon {
position: absolute;
width: 12px;
height: 20px;
margin: 5px;
transform: rotate(30deg);
animation: fade 1s infinite;
animation-delay: 0s;
background: white;
}
.loader__hexagon--value {
background: #009ECB;
}
.loader__hexagon:first-of-type {
top: 20px;
left: -12px;
animation-delay: 0.4s;
}
.loader__hexagon:last-of-type {
top: 20px;
left: 12px;
animation-delay: 0.2s;
}
.loader__hexagon:before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 12px;
height: 20px;
background: inherit;
transform: rotate(-62deg);
}
.loader__hexagon:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 12px;
height: 20px;
background: inherit;
transform: rotate(62deg);
}
@keyframes fade {
0% {
opacity: 1;
}
50% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}<div class="loader">
<div class="loader__hexagon loader__hexagon--value"></div>
<div class="loader__hexagon loader__hexagon--value"></div>
<div class="loader__hexagon loader__hexagon--value"></div>
</div>
答
，当你旋转一个div，当然它改变它的中心点，所以我只是重新定位它。
.loader-graph-default{
background-color: black;
display: none;
}
.loader-graph-loading{
display: inline;
position: absolute;
z-index: 100;
height: 100%;
width: 100%;
}
.loader {
background: none;
position: relative;
width: 60px;
height: 60px;
margin: auto;
text-align: center;
&__hexagon {
position: absolute;
width: 12px;
height: 20px;
margin: 5px;
transform: rotate(30deg);
animation: fade 1s infinite;
animation-delay: 0s;
/*background: $uiColor;*/
background: white;
/*
&--carbon {
background: $carbon;
}
&--value {
background: $value;
}
&--research {
background: $research;
}
&--quality {
background: $quality;
}
*/
&--value {
background: #009ECB;
}
&:first-of-type {
top: 20px;
right: 50%;
margin-left: 3px;
animation-delay: 0.4s;
}
&:last-of-type {
top: 20px;
left: 50%;
animation-delay: 0.2s;
margin-left: 6px;
}
&:nth-child(2) {
left: 50%;
margin-left: -6px;
}
&:before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 12px;
height:20px;
background: inherit;
transform: rotate(-62deg);
}
&:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 12px;
height: 20px;
background: inherit;
transform: rotate(62deg);
}
}
}
@keyframes fade{
0%{
opacity: 1;
}
50%{
opacity: .1;
}
100%{
opacity: 1;
}
}<div class="loader">
<div class="loader__hexagon loader__hexagon--value"></div>
<div class="loader__hexagon loader__hexagon--value"></div>
<div class="loader__hexagon loader__hexagon--value"></div>
</div>
答
您已经添加了左：-12px的第一个div的带班 “loader__hexagon loader__hexagon - 值”，其中移动整个街区由左 - 12像素。
此外，Loader的宽度不是60px。
.loader__hexagon:first-of-type {
top: 20px;
animation-delay: 0.4s;}
添加样式的第二个孩子：老三的
.loader__hexagon:nth-child(2) {
left: 12px; }
编辑风格：
.loader__hexagon:last-of-type {
top: 20px;
left: 23px;
animation-delay: 0.2s; }
减少装载机的宽度 风格应该下面给出45px：
.loader {
background: none;
position: relative;
width: 45px;
height: 60px;
margin: auto;
text-align: center; }
答
你在你的六边形上使用绝对定位，这就是为什么它们不居中，尝试一种不同的方法，比如显示：对于底部六边形，调整边距（中间有一些空间）的内联块。
&__hexagon {
margin: 0 auto;
}
&:first-of-type {
display: block;
}
&:nth-child(2) {
margin-right: 4px;
display: inline-block;
}
&:last-of-type {
margin-left: 4px;
display: inline-block;
}
只是一个基本的言论，您的装载机是很酷，但它会更容易处理，如果你只是从它（在这里，它是复杂的做了一个GIF，只是占用一些CPU为，这只是为了矫枉过正）。中心问题来自定位，只要您更改position属性，就会中断HTML流。 – sjahan
为什么不使用['transform']（https：// developer。mozilla.org/en-US/docs/Web/CSS/transform?v=b）？ – Script47
是否这样？ https://jsfiddle.net/a0d5ovms/7/ – debute