How to add spinner to the clicked button

[Oleksandr_Redchenko]

If you need to use spinners within buttons to indicate an action is currently processing, you can do so by following the instructions below.

For implementation, two conditions must be met:

1. You need to upload spinner to your app;

2. You need do add next styles to your button:

  .button {
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

Now you need to add logic to your button.

On Click Event

Delete Object Property block should be placed in your app logic where you need to return the button to the initial state.
In the marked field you need to paste URL of your spinner in format url(yourSpinnerURL). You can get it in BACKEND section of console:

Label Logic

Disabled State Logic

Live Demo
https://www.backendless.us/api/files/ui-builder/containers/recipes/index.html?page=buttonWithSpinner

[Alex_Klein]

Is there a way to add a spinner state using just CSS (instead of a background-image)? And, if so, general question: is it better to do things with CSS or with background-image?

Also, the live demo isn’t working, getting {“code”:11033,“message”:…}

[mark-piller]

I would prefer css since it more versatile than a static image. The link is now working btw.

[Alex_Klein]

Here’s a simple CSS spinner, works great (but the button has to have position:
absolute, fixed or relative:

/* targeting button label to make it invisible when spinner is called*/
.button-loading .bl-button-label {
  visibility: hidden;
  opacity:0;
}
/* defining the animation*/
@keyframes spinner {
from {transform:rotate(0deg);}
to {transform: rotate(360deg);}
}

/* add the following class to any button to make it spin, remove the class to stop the spinner and go back to normal*/
.button-loading::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border-top: 2px solid #ffffff;
  border-right: 2px solid transparent;
  animation: spinner .6s linear infinite;
}

How to add & remove class:

[Tim_Jones]

Thanks, @Alex_Klein!