Question

这现在意义为零。我只是想在我的angular 4应用程序中加载身体时显示椭圆动画。会显示文本，但直到加载根后动画才处于活动状态。我什至可以让我的“所有中心”类正常工作，但不能使动画正常工作。可能是什么问题？

    <!doctype html>
    <html lang="en">
    <head>
      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />
      <meta charset="utf-8">
      <title>ClearGUIWeb</title>  
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">   
      <script type="text/javascript"></script>
      <style>         
          .center-all {
             position: fixed;
             top:50%;
             left:50%;        
             transform: translate(-50%, -50%);
             transform: -webkit-translate(-50%, -50%);
             transform: -moz-translate(-50%, -50%);
             transform: -ms-translate(-50%, -50%);
            }   

    .loading {
      font-size: 40px;
    }

    .loading:after {
      overflow: hidden;
      display: inline-block;
      vertical-align: bottom;
      -webkit-animation: ellipsis steps(4,end) 1200ms infinite;      
      animation: ellipsis steps(4,end) 1200ms infinite;
      content: "\2026"; /* ascii code for the ellipsis character */
      width: 0px;
    }

    @keyframes ellipsis {
      to {
        width: 1.25em;    
      }
    }

    @-webkit-keyframes ellipsis {
      to {
        width: 1.25em;    
      }
    }
      </style>  
    </head>
    <body> 
         <div class="center-all">  
          <div class="loading">Loading</div>              
        </div>       
         <app-root></app-root>
</body>
</html>

Answer 1

如果要加载屏幕，只需执行此操作。非常简单

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style type="text/css">
    app-root:empty::after {
      content: 'Loading…';
      width: 100px;
      height: 100px;
      position: absolute;
      display: block;
      top: 50%;
      left: 50%;
      font-size: 20px;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
<app-root></app-root>
</body>
</html>

在加载应用根之前，Index.html样式不可用

1 个答案: