CODEWITHSUNDEEP
angularangular-material
Bryan
Bryan

Reputation: 3009

Using Angular Material Progress Spinner in index.html

I want to display Angular Material's progress spinner when the page is initially loading, so I used the following code in my index file:

<body >
  <app-root>
      <md-progress-spinner mode="indeterminate">
  </app-root>
</body>

When I do this, the spinner does not appear, however if I move the spinner to my app.component.html file, it does appear. Is it possible to get Angular Material progress spinners to work inside the index file? If so, how?

Upvotes: 3

Views: 2922

Answers (1)

Robin Dijkhof
Robin Dijkhof

Reputation: 19298

I think this will never work. Angular is still loading and so is Angular material. You'll need a pure CSS solution to display a spinner before Angular loads.

Some example in your index.html

<app-root>
    <div class="app-loading">
      <div class="logo"></div>
      <svg class="spinner" viewBox="25 25 50 50">
        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
      </svg>
    </div>

  </app-root>


<head>
  <style type="text/css">
    body, html {
      height: 100%;
    }
    .app-loading {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
    .app-loading .spinner {
      height: 200px;
      width: 200px;
      animation: rotate 2s linear infinite;
      transform-origin: center center;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }
    .app-loading .spinner .path {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
      animation: dash 1.5s ease-in-out infinite;
      stroke-linecap: round;
      stroke: #ddd;
    }
    @keyframes rotate {
      100% {
        transform: rotate(360deg);
      }
    }
    @keyframes dash {
      0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
      }
      50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
      }
      100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
      }
    }
  </style>
</head>

Upvotes: 4

Related Questions