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;
    .then(response => {
      this.loading = false;
    .catch(error => {
      // handle error
      console.log("This is error: " + error.response);
    .finally(function () {
      // always executed

One thought on “Loader animation inside Vuetify Button with VueJs

  1. This example is better than mentioned in Vuetify’s documentation. Thank you Aman.

    By the way, I think one should also set “this.loading=false;” in the catch block, because if the request fails the loader will still be keep spinning.

Leave a Reply

Your email address will not be published.