Barra de carga con Bananin
npm install @bananin/bprogressIncluye estas etiquetas en el head
``HTML`
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");
- 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
- show: Muestra el componente
- hide: Oculta el componente
- actualizaPor: actualiza el valor de carga (0-100)
- cancelado: Se ha pulsado el botón cancelar
Ejemplo en Progress con Bananin