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

Input