Angular Material 14: Loading animation on Button not running

LeO 0
Viewed 16

I have an Angular Material Button and when the user clicks data should be loaded and the animation should be shown. Therefore I have created

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

.spinner:before {
    position: absolute;
    top: 50%;
    left: 50%;
    animation: spinner 0.8s linear infinite;
    box-sizing: border-box;
    margin-top: -10px;
    margin-left: -10px;
    border: 2px solid white;
    border-top-color: black;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    content: '';
}

Assigning a button the class spinner won't initate the animation. I created a sample. The animation should be visible on button Sample2. Any hints?

angular-material
1 Answers

With the help of @Amit Kumar I figured out that the Material Button has to look like:

<button mat-stroked-button [disabled]="true" > 
  <span class="spinner">Sample2</span>
</button>

i.e. I need to set the class on the text instead of the mat-button!

LeO0
Related