docs/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue-ladda example</title>

  <script src="https://unpkg.com/vue@2.3.2/dist/vue.min.js"></script>
  <script src="./vue-ladda.js"></script>

  <style>
    button { outline: none; }
  </style>
</head>
<body>
  <div id="app">
    <vue-ladda v-for="(button, index) in buttons"
               :key="index"
               :loading="button.loading"
               :data-style="button.dataStyle"
               :progress="button.progress"
               @click="submit(button)">
    </vue-ladda>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: function() {
        return {
          buttons: [
            {
              loading: false,
              'dataStyle': 'expand-left',
              progress: 0,

            },
            {
              loading: false,
              'dataStyle': 'expand-up',
              progress: 0
            },
            {
              loading: false,
              'dataStyle': 'contract-overlay',
              progress: 0
            }
          ]
        }
      },
      methods: {
        submit: function(button) {
          const duration = 2000;

          button.loading = true;
          updateButtonProgress(duration, button);

          setTimeout(function() {
            button.loading = false;
          }, duration);
        }
      }
    });


    function updateButtonProgress(duration, button) {
      var start = null;
      function update(timestamp) {
        var delta, progress;

        if (!start) start = timestamp;
        delta = timestamp - start;
        progress = delta / duration;
        if (progress >= 1 || progress < 0) return;
        button.progress = progress;
        window.requestAnimationFrame(update);
      }

      window.requestAnimationFrame(update);
    }
  </script>
</body>
</html>