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

Genera un loading con la function de vuesax $vs.loading(options)

Code copied

# Type Update

Cambia el tipo de loading con la opci贸n type

Tipos de loading:

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

Has click en el loading de ejemplo para abrirlo en toda la pagina

Code copied

# Color

Cambia el color de la animaci贸n del loading con la propiedad color, los colores pueden ser los principales de vuesax o (RGB, HEX)

Code copied

# Background

Puedes cambiar el background del loading con la propiedad loading

Code copied

# Text New

Agrega un texto descriptivo de el loading o informando al usuario que se esta cargando o que falta por cargar con la propiedad text

Code copied

# Percent New

Puedes agregar un string del porcentaje de carga con la propiedad percent, si necesitas cambiar ese valor usa la funci贸n changePercent en la instancia del loading

Code copied

# Progress New

Agregar una barra de progreso en la parte superior para indicar el progreso de carga del loading con la propiedad progress, el valor es un numero que determina el porcentaje y el valor permitido es (0 - 100)

Code copied

# Target New

Usa el loading en un elemento del dom en especifico usando la propiedad target y el valor puede ser un string con el id o la class solo si es unica para el elemento, tambien puedes usar el elemento en si como por ejemplo usando $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 cambia la animaci贸n de el loading. default Usage Open Close 
<script>
  export default {
    methods: {
      openLoading() {
        const loading = this.$vs.loading({
          type: 'waves'
        })
        setTimeout(() => {
          loading.close()
        }, 3000)
      }
    }
  }
</script>
color String Todos los colores de vuesax (RGB y HEX) cambia el color de la animaci贸n de el loading. primary Usage Open Close 
<script>
  export default {
    methods: {
      openLoading() {
        const loading = this.$vs.loading({
          color: '#000'
        })
        setTimeout(() => {
          loading.close()
        }, 3000)
      }
    }
  }
</script>
background String Todos los colores de vuesax (RGB y HEX) Cambia el color de el fondo de el 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 Agrega un texto debajo de la animaci贸n de el loading. Usage Open Close 
<script>
  export default {
    methods: {
      openLoading() {
        const loading = this.$vs.loading({
          text: 'Loading...',
        })
        setTimeout(() => {
          loading.close()
        }, 3000)
      }
    }
  }
</script>
percent String (0% - 100%) Agrega un texto de porcentaje adentro de el 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) Agrega una barra de progreso al loading y el progreso seria el valor. Usage Open Close 
c贸digo...
target String || html || ref String || html || ref Determina el padre de el loading donde se va a instanciar. 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) Cambia la opacidad de el 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) Cambia el tama帽o de la animaci贸n de el loading. 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 Cambia el valor de el percent despu茅s de instanciar el 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 Cambia el valor de el progress despu茅s de instanciar el 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 Cambia el valor de la propiedad text despu茅s de instanciar el loading.
Last Updated: 13/1/2020 12:32:50

Input