css - 以 Angular 自定义 css 加载器

Question

我有这个loader工作正常。

CSS:

.loader {
      border: 16px solid #f3f3f3;
      border-radius: 50%;
      border-top: 16px solid #3498db;
      width: 120px;
      height: 120px;
      -webkit-animation: spin 2s linear infinite; /* Safari */
      animation: spin 2s linear infinite;
    }
    
    /* Safari */
    @-webkit-keyframes spin {
      0% { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

<div *ngIf="somevalue" class="loader"></div>

现在我需要把一些文字放在中间

但我的尝试不起作用。我怎样才能让我的装载机像第二张图片一样？我不想安装更多外部组件，md-progress-loader、md-circle...等。TRY IT

Answer 1

一个非常简单的解决方案是将文本放入另一个 div 并相应地定位它 - 就像

<div class="container">
 <div class="loader"></div>
 <div class="description">Text</div>
</div>

和

.description
{
   position: absolute;
   top:0;
   left:0;
   line-height:150px;
   width:152px;
   text-align:center;
}

.container
{
   position:relative;
}