无法管理中心加载程序

我在我的应用程序中使用加载程序，但无法正确对中。无法管理中心加载程序

正如你将看到它稍微移动到屏幕的左侧。

这里的小提琴：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”你可以看到它没有居中。

我缺少什么？

来源

2017-10-09 ste

只是一个基本的言论，您的装载机是很酷，但它会更容易处理，如果你只是从它（在这里，它是复杂的做了一个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

您可以将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>

来源

2017-10-09 09:38:44

，当你旋转一个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>

Fiddle

来源

2017-10-09 09:43:05

您已经添加了左：-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; }

来源

2017-10-09 09:51:38 Abhilasha

你在你的六边形上使用绝对定位，这就是为什么它们不居中，尝试一种不同的方法，比如显示：对于底部六边形，调整边距（中间有一些空间）的内联块。

&__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; 
    }

fiddle

来源

2017-10-09 09:56:10 mulsun

无法管理中心加载程序

回答

相关问题