时间戳

首页 > 解决方案 > CSS 加载器到中心

html - CSS 加载器到中心

问题描述

我已经使用 loader.io 创建了一个加载器，并将 css 和 HTML 集成到了 angular 应用程序中，但是我的加载器没有显示在屏幕中央，并带有应有的背景。

@keyframes spin {
    0% { transform: rotate(0deg) }
    50% { transform: rotate(180deg) }
    100% { transform: rotate(360deg) }
  }
  .loader div {
    position: absolute;
    animation: spin 3.77s linear infinite;
    width: 113.08px;
    height: 113.08px;
    top: 71.96px;
    left: 71.96px;
    border-radius: 50%;
    box-shadow: 0 4.6259999999999994px 0 0 #20c997;
    transform-origin: 56.54px 58.852999999999994px;
  }
  .loader-container {
    width: 257px;
    height: 257px;
    display: inline-block;
    overflow: hidden;
    background: blue;
  }
  .loader {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0; /* see note above */
  }
  .loader div { box-sizing: content-box; }
<div *ngIf="true" class="loader-container">
    <div class="loader">
        <div></div>
    </div>
</div>

我想把装载机带到中心。

标签： htmlcssangularwebpack

解决方案

.loader div {

   position: absolute;
   animation: spin 3.77s linear infinite;
   width: 113.08px;
   height: 113.08px;
   top: 50%;
   left: 50%;
   border-radius: 50%;
   box-shadow: 0 4.6259999999999994px 0 0 #20c997;
   transform: translate(-50%, -50%);
}

推荐阅读