Hands-On Full-Stack Web Development with ASP.NET Core

Busy indicator

Let's complete our page by adding a simple busy indicator spinner:

1. Add the HTML in bold to index.html:

<div id="productsContainer" class="clear-fix"></div><div class="clear-fix"></div><div id="wait" class="loader-container hidden">  <div class="loader"></div></div>

2. Add the relevant CSS to app.css:

.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); }}

3. Implement spinner ...