Missing css style for spinner-grow

Question

At the Blazor Traninig exercise i noticed that the progress red ball was not working.

https://learn.microsoft.com/en-gb/training/modules/blazor-build-rich-interactive-components/3-exercise-use-javascript-libraries-blazor-apps

I add to include this CSS at the site.css for the tranning exercise to make it work.

@keyframes spinner-grow {
    0% {
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

.spinner-grow {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    background-color: currentColor;
    border-radius: 50%;
    opacity: 0;
    animation: spinner-grow 0.75s linear infinite;
}

Answer 1

Hi Ricardo Cadete,

Thank you for reaching out to the Microsoft Q&A forum. 

During the Blazor training exercise, I observed that the progress red ball animation was not functioning as expected. To rectify this, I included the following CSS in the site.css file to ensure the spinner animation works correctly:

@keyframes spinner-grow {
    0% {
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

.spinner-grow {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    background-color: currentColor;
    border-radius: 50%;
    opacity: 0;
    animation: spinner-grow 0.75s linear infinite;
}

Including this CSS snippet should enable the animated spinner to appear and function as intended during the order status updates.

For further details, please refer to the training module: Use JavaScript libraries in a Blazor app.

If you follow these steps and still encounter issues, please provide any error messages you receive so that I can assist you further. 

If you have found the answer provided to be helpful, please click on the "Accept answer/Upvote" button so that it is useful for other members in the Microsoft Q&A community.     

Thank you.