Loading

A simple loading overlay

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
<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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
<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

New! 0.7.5

Slot is available for loading content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
<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>

# API

Name
Description
Type
Values
Default
activeWhether modal is active or not, use the .sync modifier to make it two-way binding Boolean false
animationCustom animation (transition name) String fade
is-full-pageLoader will overlay the full page Boolean true
can-cancelCan close Loading by pressing escape or clicking outside Boolean false
on-cancelCallback function to call after user canceled (pressed escape / clicked outside) Function

# Variables

You can use these variables to customize this component.

Name
Description
Default
$loading-backgroundThe loading background colorrgba(255,255,255,0.5)
$loading-background-legacyThe loading background color for non-rgba compatible browsers#7f7f7f
$loading-icon-sizeThe loading icon size3em
$loading-full-page-icon-sizeThe loading icon size when loader is displayed over full page5em

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub