Buefy loading tests

by jorgeluis

HTML

<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
<div id="app" class="container">

  <button class="button" @click="showLoading">
    load
  </button>
  
  <b-field>
    <b-switch v-model="isFullPage">Display full page</b-switch>
  </b-field>

  <b-notification :closable="false">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
    <b-loading :is-full-page="isFullPage" :active.sync="isLoading" :can-cancel="true"></b-loading>
  </b-notification>


  <b-notification :closable="false" v-if="isLoading">
    <div class="icon--loading">
      <b-loading :is-full-page="false" :active.sync="isLoading"></b-loading>
    </div>
    Inside notification icon
  </b-notification>


</div>

SCSS

.icon--loading {
  position: relative;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  top: 0.25rem;
  margin-right: 0.5rem;
  
  .loading-overlay .loading-background {
    background: transparent;
  }
  
  .loading-overlay .loading-icon:after {
    top: -0.75rem; 
    left: -0.75rem;
    width: 1.5rem;
    height: 1.5rem;
    border-width: 1px;
  }
}

JavaScript

const example = {
    data() {
        return {
            isLoading: false,
            isFullPage: false
        }
    },
    methods: {
        showLoading() {
            this.isLoading = true
            setTimeout(() => {
                this.isLoading = false
            }, 10 * 8000)
        }
    }
}

const app = new Vue(example)
app.$mount('#app')