The Loading will be closed after about 10 seconds, by pressing escape or by clicking outside.
Use :is-full-page="false" to limit loader to its container.
In this case, the container element should be positioned as position: relative.
<template>
<section>
<b-field>
<button class="button is-primary is-medium" @click="openLoading">
Launch loading
</button>
</b-field>
<b-field>
<b-switch v-model="isFullPage">Display loader over 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>
</section>
</template>
<script>
export default {
data() {
return {
isLoading: false,
isFullPage: true
}
},
methods: {
openLoading() {
this.isLoading = true
setTimeout(() => {
this.isLoading = false
}, 10 * 1000)
}
}
}
</script>
# Programmatically opening
When you want to close the Loading, call the close() method from the component.
<template>
<div>
<b-field>
<button class="button is-primary is-medium" @click="open">
Launch loading
</button>
</b-field>
<b-field>
<b-switch v-model="isFullPage">Display loader over full page</b-switch>
</b-field>
<b-notification ref="element" :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-notification>
</div>
</template>
<script>
export default {
data() {
return {
isFullPage: true,
}
},
methods: {
open() {
const loadingComponent = this.$buefy.loading.open({
container: this.isFullPage ? null : this.$refs.element.$el
})
setTimeout(() => loadingComponent.close(), 3 * 1000)
}
}
}
</script>
# Templated
Slot is available for loading content.
<template>
<section>
<b-field>
<button class="button is-primary is-medium" @click="openLoading">
Launch loading
</button>
</b-field>
<b-field>
<b-switch v-model="isFullPage">Display loader over 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-icon
pack="fas"
icon="sync-alt"
size="is-large"
custom-class="fa-spin">
</b-icon>
</b-loading>
</b-notification>
</section>
</template>
<script>
export default {
data() {
return {
isLoading: false,
isFullPage: true
}
},
methods: {
openLoading() {
this.isLoading = true
setTimeout(() => {
this.isLoading = false
}, 10 * 1000)
}
}
}
</script>
Name | Description | Type | Values | Default |
|---|---|---|---|---|
active | Whether modal is active or not, use the .sync modifier to make it two-way binding | Boolean | — | false |
animation | Custom animation (transition name) | String | — | fade |
is-full-page | Loader will overlay the full page | Boolean | — | true |
can-cancel | Can close Loading by pressing escape or clicking outside | Boolean | — | false |
on-cancel | Callback function to call after user canceled (pressed escape / clicked outside) | Function | — | — |
You can use these variables to customize this component.
Name | Description | Default |
|---|---|---|
$loading-background | The loading background color | rgba(255,255,255,0.5) |
$loading-background-legacy | The loading background color for non-rgba compatible browsers | #7f7f7f |
$loading-icon-size | The loading icon size | 3em |
$loading-full-page-icon-size | The loading icon size when loader is displayed over full page | 5em |
This page is open source. Noticed a typo or something's unclear?