vue.js transition for loading data

Use font-awesome to get some spinning icons. Then have a Vue data variable called loading which you set to flase before the ajax request, and true after success. Show the spinner depending on the value of loading:

new Vue({
   data: {
    loading: false
    },
    ready: function() {
    this.loading = true;
      // GET request
      this.$http({url: '/someUrl', method: 'GET'}).then(function (response) {
          // success callback
    this.loading = false;
      }, function (response) {
          // error callback
      });
    }
})

Then in your html:

<i  v-show="loading" class="fa fa-spinner fa-spin"></i>

That simple... Thanks @craigwebster

Was starting to work on manipulations with css rotate property. I guess it is using the same principle?

Very nice. @craigwebster you need to bind(this) in order to alter this.loading in the response function.

new Vue({
   data: {
    loading: false
    },
    ready: function() {
    this.loading = true;
      // GET request
      this.$http({url: '/someUrl', method: 'GET'}).then(
      function (response) {
          // success callback
          this.loading = false;
      }.bind(this),
      function (response) {
          // error callback
      });
    }
})

When I have too many results, the css animation is blocked.

I know my query can be improved but the purpose of this search icon is to notify the user the app is running.

Any idea?

it's work thanks @craigwebster