Loading | Buval

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.

Display loader over full page

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" @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.

Display loader over full page

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" @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.$buval.loading.open({
                    container: this.isFullPage ? null : this.$refs.element.$el
                })
                setTimeout(() => loadingComponent.close(), 3 * 1000)
            }
        }
    }
</script>

Templated

Slot is available for loading content.

Display loader over full page

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" @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	Value	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	—	—

Name	Description	Parameters
`close`	Triggers when user closed/canceled or called programmatically from the injected component	—

Variables #

You can use these variables to customize, Simply set one or multiple of these variables before importing Buval. Learn how.

Name	Description	Type	Default
`$loading-background`	The loading background color	string	`rgba(255,255,255,0.5)`
`$loading-background-legacy`	The loading background color for non-rgba compatible browsers	color	`#7f7f7f`
`$loading-icon-size`	The loading icon size	size	`3em`
`$loading-full-page-icon-size`	The loading icon size when loader is displayed over full page	size	`5em`