[Bug Report] v-btn: Loading indicator too large on small buttons

[Tinoooo]

Environment

Vuetify Version: 2.1.12 Vue Version: 2.6.10 Browsers: Chrome 78.0.3904.108 OS: Windows 7

Steps to reproduce

1. create v-btn
2. set property x-small to true
3. set property loading to true

Expected Behavior

The loading indicator should not be bigger than the button.

Actual Behavior

The loading indicator is bigger than the button.

Reproduction Link

https://codepen.io/tinooooo/pen/dyPPGOr

[felixfirefighter]

Hey there, I would like to contribute to Vuetify and I already have the fix done, can I take this one so you can review my PR?

[ggedde]

I just tested setting the width and height as indicated in the PR to 60% and it can cause an issue when the button width is larger than the height of the container. ie Dialogs, etc. When loading the width of the svg pushes the height of the container up and down. I found it better to leave the width as px and set the height only to 60%. Another fix might be to set btn overflow hidden.

[HunderlineK]

Hi. I see the the PR for this issue is closed: https://github.com/vuetifyjs/vuetify/pull/9912

Could the PR still use a helping hand or is it on track for V3.0.0? Thanks

[edridudi]

You can use v-progress-circular in template v-slot:loader as a workaround:

<div id="app">
  <v-app id="inspire">
    <div class="text-center">
      <v-btn outlined x-small loading>
        btn
        <template v-slot:loader>
          <v-progress-circular :indeterminate="true" size="16" width="2"></v-progress-circular>
        </template>
      </v-btn>
    </div>
  </v-app>
</div>