<!-- 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" />

<!-- html -->
<b-progress logow="/bananin/logo/logo.webp" logop="/bananin/logo/logo.png" ref="progress"></b-progress>
<b-progress logow="/bananin/logo/logo.webp" logop="/bananin/logo/logo.png" full cancelar @cancelado="cancelado" ref="progressG"></b-progress>
<div class="col text-center">
    <button class="btn btn-principal" @click="local">Local</button>
</div>
<div class="col text-center">
    <button class="btn btn-principal" @click="global">Global</button>
</div>

//JS
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
• showIn: Muestra el componente completo con circulo de carga
• hide: Oculta el componente
• actualizaPor: actualiza el valor de carga (0-100)

Eventos:

• cancelado: Se ha pulsado el botón cancelar