Loading

Loading

Default

Documentation Vuesax 4.0+

These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here 👉 Vuesax 3.x

Generate a loading with the vuesax function $vs.loading(options)

Code copied

Type Update

Change the type of loading with the option type

Tipos de loading:

  • waves
  • corners
  • border
  • points
  • square
  • gradient
  • rectangle
  • circles
  • square-rotate
  • scale

Click on the example loading to open it in the whole page

Code copied

Color

Change the color of the loading animation with the property color, the colors can be the main ones of vuesax or (RGB, HEX)

Code copied

Background

You can change the loading background with the property loading

Code copied

Text New

Add a descriptive text of the loading or informing the user that it is loading or that it is missing to load with the property text

Code copied

Percent New

You can add a string of the percentage of load with the percent property, if you need to change that value use the changePercent function in the loading instance.

Code copied

Progress New

Add a progress bar at the top to indicate the loading progress of the loading with the progress property, the value is a number that determines the percentage and the allowed value is (0 - 100)

Code copied

Target New

Use the loading on a specific dom element using the target property and the value can be a string with the id or the class only if it is unique for the element, you can also use the element itself as per example using $refs

I am the container
of the loading
Code copied

API

props

Property Type Values Description default Example More
type String waves corners border points square gradient rectangle circles square-rotate scale Change the animation of the loading. default Usage Open Close
<script>
  export default {
    methods: {
      openLoading() {
        const loading = this.$vs.loading({
          type: 'waves'
        })
        setTimeout(() => {
          loading.close()
        }, 3000)
      }
    }
  }
</script>
color String All colors of vuesax (RGB y HEX) Change the color of the loading animation. primary Usage Open Close
<script>
  export default {
    methods: {
      openLoading() {
        const loading = this.$vs.loading({
          color: '#000'
        })
        setTimeout(() => {
          loading.close()
        }, 3000)
      }
    }
  }
</script>
background String All colors of vuesax (RGB y HEX) Change the background color of the loading. #fff Usage Open Close
<script>
  export default {
    methods: {
      openLoading() {
        const loading = this.$vs.loading({
          background: 'danger',
          color: '#fff'
        })
        setTimeout(() => {
          loading.close()
        }, 3000)
      }
    }
  }
</script>
text String String Add a text below the loading animation. Usage Open Close
<script>
  export default {
    methods: {
      openLoading() {
        const loading = this.$vs.loading({
          text: 'Loading...',
        })
        setTimeout(() => {
          loading.close()
        }, 3000)
      }
    }
  }
</script>
percent String (0% - 100%) Add a percentage text inside the loading. Usage Open Close
<script>
  export default {
    methods: {
      openLoading() {
        const loading = this.$vs.loading({
          percent: '67%',
        })
        setTimeout(() => {
          loading.close()
        }, 3000)
      }
    }
  }
</script>
progress String || Number (0 - 100) Add a progress bar to the loading and the progress would be the value. Usage Open Close
código...
target String || html || ref String || html || ref Determine the parent of the loading where it will be instantiated. Usage Open Close
<template>
  <div class="center">
    <div class="con-btns">
      <vs-button dark flat @click="openLoading">Open Loading <b>Target</b></vs-button>
    </div>

    <div ref="content" class="content-div">
      Soy el contenedor <br> del <b>loading</b>
    </div>
  </div>
</template> <script>
  export default {
    methods: {
      openLoading() {
        const loading = this.$vs.loading({
          target: this.$refs.content
        })
        setTimeout(() => {
          loading.close()
        }, 3000)
      }
    }
  }
</script>
opacity String || Number (0 - 1) Change the opacity of the background. 0.6 Usage Open Close
<script>
  export default {
    methods: {
      openLoading() {
        const loading = this.$vs.loading({
          opacity: 1,
          color: 'dark'
        })
        setTimeout(() => {
          loading.close()
        }, 3000)
      }
    }
  }
</script>
scale String || Number (0 - 1) Change the size of the loading animation. 1 Usage Open Close
<script>
  export default {
    methods: {
      openLoading() {
        const loading = this.$vs.loading({
          scale: '0.4',
          color: 'dark'
        })
        setTimeout(() => {
          loading.close()
        }, 3000)
      }
    }
  }
</script>
changePercent() function String Change the value of the percent after instantiating the loading. Usage Open Close
<script>
  export default {
    data: () => ({
      percent: 0
    }),
    methods: {
      openLoading() {

        const loading = this.$vs.loading({
          percent: this.percent
        })
        const interval = setInterval(() => {
          if (this.percent <= 100) {
            loading.changePercent(`${this.percent++}%`)
          }
        }, 40)
        setTimeout(() => {
          loading.close()
          clearInterval(interval)
          this.percent = 0
        }, 4800)
      }
    }
  }
</script>
changeProgress() function String Change the value of the progress after instantiating the loading. Usage Open Close
<script>
  export default {
    data: () => ({
      progress: 0
    }),
    methods: {
      openLoading() {

        const loading = this.$vs.loading({
          progress: 0
        })
        const interval = setInterval(() => {
          if (this.progress <= 100) {
            loading.changeProgress(this.progress++)
          }
        }, 40)
        setTimeout(() => {
          loading.close()
          clearInterval(interval)
          this.progress = 0
        }, 4100)
      }
    }
  }
</script>
changeText() function String Change the value of the text property after instantiating the loading.
Last Updated: 1/13/2020, 12:32:50 PM