DEV Community

Faisal Ahmed
Faisal Ahmed

Posted on • Edited on

Css loading button

        <div class="btn-container">
          <button  *ngIf="!isLoading">Enter</button>
          <button *ngIf="isLoading"><span class="circle"></span></button>
        </div>
Enter fullscreen mode Exit fullscreen mode
.btn-container {

button{
    background-color: red;
    color: white;
    max-width: 300px;
    width: 100%;
    border: none;
    outline: none;
    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: white;
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    100% {
        rotate: 360deg;
    }
}


Enter fullscreen mode Exit fullscreen mode


another code

    <div class="action btn-container">
      <button *ngIf="isLoading" type="button" mat-raised-button color="primary" (click)="onUploadImages()">
        Upload Now
      </button>
      <button *ngIf="!isLoading" class="loading-button"><span class="circle"></span></button>
    </div>
Enter fullscreen mode Exit fullscreen mode
  isLoading: boolean = true;

  private addImagesToGallery(data: Gallery[]) {
    this.isLoading = false;
    this.galleryService.insertManyGallery(data)
      .subscribe(res => {
        if(res?.success){
          this.isLoading = true;
          this.reloadService.needRefreshData$();
          this.dialogRef.close();
        } else {
          this.isLoading = false;
        }

      }, error => {
        console.log(error);
      });
  }
Enter fullscreen mode Exit fullscreen mode

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay