Busy indicator

As a final implementation step, let's implement a busy indicator on our page:

1. Generate a BusyComponent component as part of the shared module with the following command:

ng generate component modules/shared/busy

2. Replace the HTML file /src/app/modules/shared/busy/busy.component.html contents with the following:

<div class="loader-container">
    <div class="loader"></div>
</div>

 

 

3. Replace the CSS file /src/app/modules/shared/busy/busy.component.css contents with the following:

.loader-container {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background-color: azure;
  opacity: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

4. Export the component in SharedModule...