<div class="btn-container">
<button *ngIf="!isLoading">Enter</button>
<button *ngIf="isLoading"><span class="circle"></span></button>
</div>
.btn-container {
button{
background-color: $color-primary;
color: $color-white;
max-width: 300px;
width: 100%;
border: none;
outline: none;
font-family: $font-en-montserrat;
font-style: normal;
font-size: 18px;
list-style: 22px;
padding: 13px 15px;
border-radius: 30px;
text-transform: uppercase;
box-sizing: border-box;
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
}
}
.circle {
width: 20px;
height: 20px;
display: block;
border-radius: 50%;
border: 2px solid rgb(255 255 255 / 0.5);
border-top-color: $color-white;
animation: rotate 1s linear infinite;
}
@keyframes rotate {
100% {
rotate: 360deg;
}
}
Top comments (0)