Loader animation inside Vuetify Button with VueJs

We can show loader animation inside a button in Vuetify very simply without using any gif image. we use the buttons’s :loading prop.

The loading animation inside button shows while waiting for an API response.

we define a loading property and set it to false initially. it is binded to the v-btn component’s loading prop. Before making an API call, it is set to true which shows the loader and false again once response is received successfully, this hides the loader.

<v-btn :loading="loading" @click="getRequest()">Get Request</v-btn>

data: function() {
    return {
        loading : false
    }
}

We have used Axios to make the API request. you will need to import it first or you may use any other library as well.

getRequest: function(){
    this.loading = true;
    axios.get('https://reqres.in/api/users?delay=2')
    
    .then(response => {
      this.loading = false;
      console.log(response.data);
    })
    .catch(error => {
      // handle error
      console.log("This is error: " + error.response);
    })
    .finally(function () {
      // always executed
    });
  }