Loading

A simple loading overlay

---

edit on github

Examples

Base

<template>
  <section>
    <o-field>
      <o-button size="medium" variant="primary" @click="openLoading">
        Launch loading
      </o-button>
    </o-field>
    <o-field>
      <o-switch v-model="isFullPage">Display loader over full page</o-switch>
    </o-field>
    <p style="position: relative">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
      <o-loading :full-page="isFullPage" :active.sync="isLoading" :can-cancel="true"></o-loading>
    </p>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        isLoading: false,
        isFullPage: true
      }
    },
    methods: {
      openLoading() {
        this.isLoading = true
        setTimeout(() => {
          this.isLoading = false
        }, 10 * 1000)
      }
    }
  }
</script>

Slot

<template>
  <section>
    <o-field>
      <o-button size="medium" variant="primary" @click="openLoading">
        Launch loading
      </o-button>
    </o-field>
    <o-field>
      <o-switch v-model="isFullPage">Display loader over full page</o-switch>
    </o-field>
    <p style="position: relative">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
      <o-loading :full-page="isFullPage" :active.sync="isLoading" :can-cancel="true">
        <o-icon pack="fas" icon="sync-alt" size="large" spin> </o-icon>
      </o-loading>
    </p>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        isLoading: false,
        isFullPage: true
      }
    },
    methods: {
      openLoading() {
        this.isLoading = true
        setTimeout(() => {
          this.isLoading = false
        }, 10 * 1000)
      }
    }
  }
</script>

Programmatically

<template>
  <div>
    <o-field>
      <o-button size="medium" variant="primary" @click="openLoading">
        Launch loading
      </o-button>
    </o-field>
    <o-field>
      <o-switch v-model="isFullPage">Display loader over full page</o-switch>
    </o-field>
    <p style="position: relative" ref="element">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isFullPage: true
      }
    },
    methods: {
      openLoading() {
        const loadingComponent = this.$oruga.loading.open({
          fullPage: this.isFullPage,
          container: this.isFullPage ? null : this.$refs.element
        })
        setTimeout(() => loadingComponent.close(), 3 * 1000)
      }
    }
  }
</script>

Programmatically (with promise)

<template>
  <div>
    <o-field>
      <div class="buttons">
        <o-button size="medium" variant="primary" @click="openLoading">
          Launch loading
        </o-button>
        <o-button size="medium" variant="primary" @click="openLoadingCloseAll">
          Launch loading (closeAll)
        </o-button>
      </div>
    </o-field>
    <o-field>
      <o-switch v-model="isFullPage">Display loader over full page</o-switch>
    </o-field>
    <p style="position: relative" ref="element">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isFullPage: true
      }
    },
    methods: {
      async openLoading() {
        const loadingComponent = this.$oruga.loading.open({
          fullPage: this.isFullPage,
          container: this.isFullPage ? null : this.$refs.element,
          canCancel: true
        })
        setTimeout(() => loadingComponent.close({ action: 'cancel', method: 'timeout' }), 3 * 1000)
        // Note utilizing the promise requires Promise be supported by the browser
        // If you are running Vue 2 on IE 11 this will not be the case unless you
        // add a polyfill in your build.
        const ret = await loadingComponent.promise
        this.$oruga.notification.open({
          duration: 2000,
          message: 'Loading returned ' + JSON.stringify(ret),
          variant: 'info',
          position: 'top'
        })
      },
      async openLoadingCloseAll() {
        const loadingComponent = this.$oruga.loading.open({
          fullPage: this.isFullPage,
          container: this.isFullPage ? null : this.$refs.element,
          canCancel: true
        })
        setTimeout(() => this.$oruga.loading.closeAll({ action: 'cancel', method: 'closeAll' }), 3 * 1000)
        // Note utilizing the promise requires Promise be supported by the browser
        // If you are running Vue 2 on IE 11 this will not be the case unless you
        // add a polyfill in your build.
        const ret = await loadingComponent.promise
        this.$oruga.notification.open({
          duration: 2000,
          message: 'Loading returned ' + JSON.stringify(ret),
          variant: 'info',
          position: 'top'
        })
      }
    }
  }
</script>

Class props

📄 Full scss file

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit

How does Class props inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link (▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.
🔍 This icon indicates that you should pay attention to CSS specificity. See "Deal with specificity" section in the documentation.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop. You'll find more info in the "Overriding section".

Class prop	Description	Props	Suffixes
fullPageClass	Class for the root element when fullpage.	fullPage
iconClass	Class for the loading icon.
overlayClass	Class of the loading overlay.
rootClass	Class of the root element.

Props

Prop name	Description	Type	Values	Default
active	Whether modal is active or not, use the .sync modifier (Vue 2.x) or v-model:active (Vue 3.x) to make it two-way binding	boolean	-
animation		string	-	From config loading: {   animation: 'fade' }
canCancel	Can close Loading by pressing escape or clicking outside	boolean	-	false
container		object|func|HTMLElement	-
fullPage	Loader will overlay the full page	boolean	-	true
icon	Icon name	string	-	From config loading: {   icon: 'loading' }
iconSize		string	-	'medium'
iconSpin	Enable spin effect on icon	boolean	-	true
onCancel	Callback function to call after user canceled (pressed escape / clicked outside)	func	-	Default function (see source code)
overlay		boolean	-	true
override	Override classes	boolean	-	false

Events

Event name	Properties	Description
close
update:active
update:full-page

Slots

Name	Description	Bindings
default

Style

CSS Variable	SASS Variable	Default
--oruga-loading-overlay-legacy	$loading-overlay-legacy	#7f7f7f
--oruga-loading-overlay	$loading-overlay	rgba(255,255,255,0.5)
--oruga-loading-zindex	$loading-zindex	29
--oruga-loading-fullpage-zindex	$loading-fullpage-zindex	999