Index.html styles not active until app root is loaded

Question

This is making zero sense right now. I am simply trying to show ellipses animation while the body is loading in my angular 4 application. The text shows but the animation isn't active until after the root is loaded. I can even get my "Center-All" class to work properly but not the animation. What could be the problem?

    <!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>

Have you used Chrome's profiling feature to capture what is going on in the browser? I have a feeling that your JS code is being parsed/ran, preventing the event loop from having a chance to use cycles to render any frames of the animation. Just a thought. Capturing what is going on with the profiler should help to determine if that is the case. — Daniel W Strimpel
– Daniel W Strimpel, Commented Aug 3, 2018 at 3:17

Terrance Jackson · Accepted Answer · 2018-08-03 06:21:51Z

2

Just do this if you want a loading screen.very simple

    <!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>

answered Aug 3, 2018 at 6:21

Terrance Jackson

1,1003 gold badges18 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Index.html styles not active until app root is loaded

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related