# Progress
Barra de progreso con Bananin

# Instalación

Incluye estas etiquetas en el head

```HTML
<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:

```HTML
<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:

```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](https://bananin.pw/cajita/progress)

## License
[MIT](https://choosealicense.com/licenses/mit/)

## Patrocinar 
[Con tu ayuda puedo seguir pagando el servidor <3](https://www.buymeacoffee.com/mizunie)