Using Angular Material Progress Spinner in index.html

Question

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?

you can take a look here : https://stackoverflow.com/questions/38400289/angular2-material-progress-circle — willmaz, Jul 11 '17 at 18:08
Why don't you just add a component for `Progress spinner ` ? and use it anywhere you want.. — Nour, Jul 12 '17 at 17:20
https://www.pluralsight.com/guides/bootstrapping-an-application-in-angular reviews Angular bootstrapping. `index.html` loads before Angular and third party dependencies, so components like `mat-spinner` won't be available inside the scope of ``. There are ways to include them outside the scope of `` https://stackoverflow.com/questions/38803730/how-to-include-the-ts-component-in-index-html-file but they remain after app load. Maybe there is some hack where you can bootstrap MatProgress module before other deps but... a pure CSS solution is probably the best solution here. — Nathan Beck, Aug 18 '22 at 20:44

Robin Dijkhof · Accepted Answer · 2022-08-21T14:59:28.533

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>

See that any clever way to do it is okay. I have just used "loading..." and it works. The solution proposed works on the app they present, but I was unable to replicate. It would interesting if someone actually teach how they did it, which is awesome! — Jorge Guerra Pires, Aug 21 '22 at 13:05

Using Angular Material Progress Spinner in index.html

1 Answers1