Progress
Barra de progreso con Bananin
Instalación
Incluye estas etiquetas en el head
<script src="https://unpkg.com/@bananin/bprogress@latest/js/b-progress.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/@bananin/bprogress@latest/css/b-progress.css" />Configuración
La estructura en el html es la siguiente:
<div class="my-5" id="app">
<b-progress logop="./img/logo.png" ref="progress"></b-progress>
<b-progress logop="./img/logo.png" full cancelar @cancelado="cancelado" ref="progressG"></b-progress>
<div class="col mb-4 text-center">
<button class="btn btn-info" @click="local">Local</button>
</div>
<div class="col text-center">
<button class="btn btn-info" @click="global">Global</button>
</div>
</div>La estructura en el js es la siguiente:
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