Progress

Barra de progreso con Bananin

Instalación

Incluye estas etiquetas en el head

``HTML


`




Configuración

La estructura en el html es la siguiente:

`HTML



`

La estructura en el js es la siguiente:

`JavaScript
const app = Vue.createApp({
components: {
"b-progress": bProgress
},
data() {
return {
inte:null
};
},
methods:{
local(){
this.$refs.progress.show();
let por=0;
this.inte=setInterval(()=>{
this.$refs.progress.actualizaPor(por);
por++;
if(por>110){
clearInterval(this.inte);
this.$refs.progress.hide();
}
},60);
},
global(){
this.$refs.progressG.show();
let por=0;
this.inte=setInterval(()=>{
this.$refs.progressG.actualizaPor(por);
por++;
if(por>110){
clearInterval(this.inte);
this.$refs.progressG.hide();
}
},60);
},
cancelado(){
clearInterval(this.inte);
this.$refs.progressG.hide();
}
}
}).mount("#app");
``

Opciones:

- logop: Logo en png
- logow: Logo en webp
- Nota: Si no se especifica ningún logo en su lugar aparecerá un texto de cargando y un spiner
- cancelar: El botón de cancelar esta habilitado
- full: el componente ocupará toda la pantalla

Metodos:

- show: Muestra el componente
- hide: Oculta el componente
- actualizaPor: actualiza el valor de carga (0-100)

Eventos:

- cancelado: Se ha pulsado el botón cancelar

Ejemplo en Progress con Bananin

License

MIT

Patrocinar

Con tu ayuda puedo seguir pagando el servidor <3