Vue.js+UIkit3 Loading Button.

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.24/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.24/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.24/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"></script>
<script src="https://unpkg.com/vue"></script>

<div id="app" class="uk-section uk-section-secondary uk-text-center" uk-height-viewport>
  <button class="uk-button uk-button-default uk-width-large" @click="get()">
    <template v-if="!isLoading">get repositories</template>
    <template v-else>
      <span class="loading_blink" uk-icon="icon: bolt"></span>
    </template>
  </button>
  <ul class="uk-list">
    <li v-for="event in events"><a :href="event.html_url">{{event.full_name}}</a></li>
  </ul>
</div>

CSS

.loading_blink{
    -webkit-animation:blink 1.0s step-end infinite alternate;
    -moz-animation:blink 1.0s step-end infinite alternate;
    animation:blink 1.0s step-end infinite alternate;
}

/* 点滅 */
@-webkit-keyframes blink{
    21%,40%,61%,80%,100% {opacity:0;}
    0%,20%,41%,60%,81%,99% {opacity:1;}
}
@-moz-keyframes blink{
    21%,40%,61%,80%,100% {opacity:0;}
    0%,20%,41%,60%,81%,99% {opacity:1;}
}
@keyframes blink{
    21%,40%,61%,80%,100% {opacity:0;}
    0%,20%,41%,60%,81%,99% {opacity:1;}
}

JavaScript

new Vue({
  el: '#app',
  data() {
    return {
      url: 'https://api.github.com/search/repositories',
      events: [],
      isLoading: false
    }
  },
  methods: {
    get() {
    	this.isLoading = true;
			axios.get(this.url, {
        params: {
          q: 'vuejs'
        }
      })
      .then(response => {
      	this.events = response.data.items;
        this.isLoading = false;
      })
    }  
  }
})