Animation button in sapui5

[#1]

Hi Team,

In one of the SAP cloud platform UI observed a button and I would like to implement a button exactly as below screen shot with a loading icon inside the button.

let me know how do I achieve the same as this in UI5 .

Regards

Ram

[Former Member · Accepted solution]

HI

there are many ways to do this. One way is the extend the button control.

  Button.extend("AnimateButton",{
    renderer: {},
    onAfterRendering: function() {
      if (Button.prototype.onAfterRendering) {
        Button.prototype.onAfterRendering.apply(this, arguments);
      }

      var icon = this.$().find(".sapMBtnIcon");
      if (icon.length > 0) {
        this.iconRotateAngle = 45;
        this.rotateIcon = function() {
          icon.css("transform", "rotate(" + this.iconRotateAngle + "deg)");
          this.iconRotateAngle += 45;
          if (this.iconRotateAngle >= 360) {
            this.iconRotateAngle = 0;
          }
          setTimeout(function() {
            this.rotateIcon();
          }.bind(this), 500);
        }
        setTimeout(function() {
          this.rotateIcon();
        }.bind(this), 500);
      }
    }
  });

demo: https://jsbin.com/rodozud/edit?html,js,output

Thanks

Dennis

[Former Member · Accepted solution]

Hi Dennis,

Thanks for the reply could you also let me know how would stop the animation ?

as it was using set time out text is being changed

 setTimeout(function() {
    btn.setText("Stopping");
  }, 2000);

but how would we stop animation at a particular event in a view.

Regards

Ram

[Former Member]

HI Ram

we can do it like this

https://jsbin.com/woyitopize/edit?html,js,output