Button with loader

[bbm]

Hi,

with the TUniSweetAlert it is possible to set the propert ShowLoaderOnConfirm = True.

Is there any way to do the same with the TUniButton?

Best regards

[Sherzod]

Hi,

15 minutes ago, bbm said:

Is there any way to do the same with the TUniButton?

And what's next?

[bbm]

When the button is pressed, an action is carried out in the background. As long as the action is being carried out, the loader should be visible. In my case, the button sits on a form that is automatically closed after an action has been performed.

[Hayri ASLAN]

Hello

You can try below code. You can play with css to customize.

UniServerModule.CustomCSS

.button--loading .x-btn-inner {
  visibility: hidden;
  opacity: 0;
}

.button--loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 4px solid transparent;
  border-top-color: #000000;
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;
}

@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn);
  }

  to {
    transform: rotate(1turn);
  }
}

UniButton1->ClientEvents->UniEvents->ajaxRequest :

function ajaxRequest(sender, url, data)
{
  sender.setDisabled(true);
  sender.addCls('button--loading');
}

UniButton1->ClientEvents->UniEvents->ajaxCallback :

function ajaxCallback(sender, response)
{
  sender.setDisabled(false);
  sender.removeCls('button--loading');
}

To test, you can add sleep into button click event.

procedure TMainForm.UniButton2Click(Sender: TObject);
begin
  Sleep(5000);
end;

[Sherzod]

Also, I think you can put UniImage under the button ("and show after click"). And hide the button at the same time:

function click(sender, e, eOpts)
{
    this.hide();
}

 

[bbm]

Thank you, I will try and come back

[bbm]

Hi,

Thank you very much . This is exactly what I'm looking for.

Best regards