How to use ladda - 10 common examples

ngOnInit() {
        this.ladda = createLadda(this.el);

        // if the initial loading value isn't false, a timeout of 0 ms
        // is necessary for the calculated spinner size to be correct.
        setTimeout(() => { this.updateLadda(false); }, 0);
    }

mounted () {
    // Ladda Buttons
    ladda.bind('div:not(.progress-demo) .ladda-button', { timeout: 2000 })

    // Bind progress buttons and simulate loading progress
    ladda.bind('.progress-demo button', {
      callback: function (instance) {
        let progress = 0
        let interval = setInterval(function () {
          progress = Math.min(progress + Math.random() * 0.1, 1)
          instance.setProgress(progress)

          if (progress === 1) {
            instance.stop()
            clearInterval(interval)
          }
        }, 200)
      }
    })
  }
}

mounted () {
    // Ladda Buttons
    ladda.bind('div:not(.progress-demo) .ladda-button', { timeout: 2000 })

    // Bind progress buttons and simulate loading progress
    ladda.bind('.progress-demo button', {
      callback: function (instance) {
        let progress = 0
        let interval = setInterval(function () {
          progress = Math.min(progress + Math.random() * 0.1, 1)
          instance.setProgress(progress)

          if (progress === 1) {
            instance.stop()
            clearInterval(interval)
          }
        }, 200)
      }
    })

UPLOAD_ERR_FORM_SIZE: 2,
    UPLOAD_ERR_PARTIAL: 3,
    UPLOAD_ERR_NO_FILE: 4,
    UPLOAD_ERR_NO_TMP_DIR: 6,
    UPLOAD_ERR_CANT_WRITE: 7,
    UPLOAD_ERR_EXTENSION: 8,
    // BIRD3 specific
    UPLOAD_IMG_CANT_RESIZE: -1,
    UPLOAD_IMG_UNSUPPORTED: -2,
    UPLOAD_FILETYPE_MISMATCH: -3,
    UPLOAD_ERROR_SAVE: -4
};

// Refferences to buttons
var $button = document.getElementById("upload_trigger");
var $ladda = ladda.create($button);
var $input = document.getElementById("upload_holder");
var $fd = document.getElementById("filedrop");

// Zoooooooone o.o
var zone = window.zone = new filedrop.FileDrop($fd, {
    iframe: {
        url: location.href,
        fileParam: "image"
    },
    //input: $input,
    multiple: false
});

// Set up an additional handler for the button, cause the button is a derp.
var $fdInput = zone.findInputRecursive(zone.zone);
$button.click(function(e){

UPLOAD_ERR_FORM_SIZE: 2,
    UPLOAD_ERR_PARTIAL: 3,
    UPLOAD_ERR_NO_FILE: 4,
    UPLOAD_ERR_NO_TMP_DIR: 6,
    UPLOAD_ERR_CANT_WRITE: 7,
    UPLOAD_ERR_EXTENSION: 8,
    // BIRD3 specific
    UPLOAD_IMG_CANT_RESIZE: -1,
    UPLOAD_IMG_UNSUPPORTED: -2,
    UPLOAD_FILETYPE_MISMATCH: -3,
    UPLOAD_ERROR_SAVE: -4
};

// Refferences to buttons
var $button = document.getElementById("upload_trigger");
var $ladda = ladda.create($button);
var $input = document.getElementById("upload_holder");
var $fd = document.getElementById("filedrop");

// Zoooooooone o.o
var zone = window.zone = new filedrop.FileDrop($fd, {
    iframe: {
        url: location.href,
        fileParam: "image"
    },
    //input: $input,
    multiple: false
});

// Set up an additional handler for the button, cause the button is a derp.
var $fdInput = zone.findInputRecursive(zone.zone);
$button.click(function(e){

setTimeout(function () {
                    var button = Ladda.create(scope.ui.submit.get(0));
                    button.start();
                    var submitPromise = scope.view.onFormSubmit();

                    if (submitPromise) {
                        submitPromise.finally(function () {
                            if (!scope.isDestroyed) {
                                button.stop();
                            }
                        });
                    }
                }, 0);

addReply (reply) {
                let l = Ladda.create(document.querySelector('#reply-submit-btn'));
                l.start();

                axios.post(this.add_comment_url, reply)
                    .then( (response) => {
                        console.log(response);
                        //hide comment form
                        $("#comments").html(response.body);
                        $('.modal').modal('hide');
                        $('body').removeClass('modal-open');
                        $('.modal-backdrop').remove();
                        //show success alert
                        let successAlert = $('#success-alert');
                        successAlert.show();
                        successAlert.fadeOut(1000 * 10);
                        $('#success-msg').html('Success! your reply will be published soon');
                        //clear form values

storeArticle() {
                let l = Ladda.create(document.querySelector('#submit-btn'));
                l.start();

                axios.request({
                    method: this.method,
                    url: this.url,
                    data: this.article_data

                }).then( (response) => {
                    l.stop();
                    location.href = response.data.redirect_url;

                }).catch( (error) => {
                    l.stop();
                    alertError(error.response.data.errorMsg);
                })
            }

shown: function (modal) {
      var $okBtn = modal.$el.find('.btn.ok');
      $okBtn.addClass('ladda-button').attr('data-style', 'expand-left');

      this.laddaBtn = Ladda.create($okBtn.get(0));

      this.$el.find('form .mod').focus();
    },

submit: function () {
    var self = this
    var $form = this.$el.find('form')

    var $uploadBtn = $form.find('button[type=submit]')
    var laddaBtn = Ladda.create($uploadBtn.get(0))
    laddaBtn.start()

    $.ajax('/api/missions', {
      success: function (data) {
        laddaBtn.stop()
        self.render()
      },
      error: function () {
        laddaBtn.stop()
      },
      files: $form.find(':file'),
      iframe: true
    })
  }
})