@bananin/bprogress v1.0.2

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

License

MIT

Patrocinar

Con tu ayuda puedo seguir pagando el servidor <3