How to use ladda - 10 common examples

To help you get started, we’ve selected a few ladda examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github moff / angular2-ladda / projects / ladda / src / lib / ladda.directive.ts View on Github external
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);
    }
github laraspace / laraspace-vue / resources / js / views / admin / basic-ui / Buttons.vue View on Github external
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)
      }
    })
  }
}
github laraspace / laraspace-vue / resources / js / views / admin / basic-ui / Buttons.vue View on Github external
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)
      }
    })
github DragonsInn / BIRD3 / app / Frontend / Upload.js View on Github external
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){
github DragonsInn / BIRD3 / web-lib / upload.js View on Github external
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){
github Lugribossk / dropwizard-experiment / common / common-client / src / main / javascript / ui / Form.js View on Github external
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);
github alimranahmed / LaraBlog / resources / assets / js / components / article / Comments.vue View on Github external
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
github alimranahmed / LaraBlog / resources / assets / js / components / article / ArticleForm.vue View on Github external
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);
                })
            }
github Dahlgren / arma-server-web-admin / public / js / app / views / mods / form.js View on Github external
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();
    },
github Dahlgren / arma-server-web-admin / public / js / app / views / missions / upload.js View on Github external
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
    })
  }
})

ladda

Buttons with built-in loading indicators

MIT
Latest version published 3 years ago

Package Health Score

62 / 100
Full package analysis

Similar packages