[code_snippet id=4 format name=”Butão”]

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Medidor de Banca</title>

<style>
body{
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    background:#f5f5f5;
    font-family:Arial, sans-serif;
}

.container{
    width:400px;
}

.barra{
    width:100%;
    height:30px;
    background:#ddd;
    border-radius:20px;
    overflow:hidden;
}

.progresso{
    height:100%;
    transition:1s;
}

.percentual{
    text-align:center;
    margin-top:10px;
    font-size:24px;
    font-weight:bold;
}
</style>



<div class="container">
    <div class="barra">
        <div class="progresso" id="progresso"></div>
    </div>
    <div class="percentual" id="percentual"></div>
</div>

<script>
// ALTERE APENAS ESTE VALOR
const porcentagem = 78;

// -----------------------

const barra = document.getElementById('progresso');
const texto = document.getElementById('percentual');

barra.style.width = porcentagem + '%';

if(porcentagem < 50){
    barra.style.background = '#dc3545';
} else if(porcentagem < 70){
    barra.style.background = '#ffc107';
} else if(porcentagem < 85){
    barra.style.background = '#28a745';
} else {
    barra.style.background = '#007bff';
}

texto.textContent = porcentagem + '%';
</script>