Vuetify button with loader with text inline - css

Question

I'm trying to use loader inside button along with text. I've modified example from vuetify documentation:
<span slot="loader">
<v-icon light class="custom-loader">cached</v-icon>
Loading...
</span>
codepen
On click event button text changes and loader appears. However button's content is not inline.
Please advise how to make button content composed inline and independent of text width?

Answer 1

DEMO: https://codepen.io/anon/pen/ejgEoO
I've added styles for the classes used by vuetify: .v-btn__loading and .v-btn--loader .v-btn__content: So your CSS becomes:
.v-btn__loading {
position: relative;
}
.v-btn--loader .v-btn__content {
display: none;
}
.custom-loader {
animation: loader 1s infinite;
}
#-moz-keyframes loader {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#-webkit-keyframes loader {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#-o-keyframes loader {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#keyframes loader {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}