CODEWITHSUNDEEP
cssvue.jsvuetify.js
user947668
user947668

Reputation: 2728

Vuetify button with loader with text inline

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.

enter image description here

Please advise how to make button content composed inline and independent of text width?

Upvotes: 1

Views: 4159

Answers (1)

Swati Anand
Swati Anand

Reputation: 899

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);
  }
}

Upvotes: 2

Related Questions