<progress id="bp" class="progressbar barrajuego" value="8" max="10">
  <span>Progreso: <span class="pval">8</span>/10</strong></span>
</progress>

/* ELIMINAMOS LOS ESTILOS DEPENDIENTES DE LA PLATAFORMA */

.progressbar {
  /* Eliminamos la apariencia nativa, para poder asignar estilos */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Copiado de normalize.css */
  vertical-align: baseline;
}

/* AÑADIMOS NUESTROS ESTILOS PERSONALIZADOS */

$grosor: 1em;
$longitud: 10em;
$color-fondo: skyblue;
$color-relleno: royalblue;

.barrajuego {
  /* Tamaño unificado */
  height: $grosor;
  width: $longitud;
}

@mixin barra-fondo() {
  background-color: $color-fondo;
  border-radius: $grosor/2;
}

@mixin barra-relleno() {
  background-color: $color-relleno;
  border-radius: $grosor/2;
}

/* Fondo de la barra en Chrome, Safari, Opera… */
.barrajuego::-webkit-progress-bar {
  @include barra-fondo();
}

/* Fondo de la barra en Firefox, IE, Egde… */
.barrajuego {
  @include barra-fondo();
  border: none; /* ¡Firefox añade un borde a la barra! */
}

/* Relleno de la barra en Chrome, Safari, Opera… */
.barrajuego::-webkit-progress-value {
  @include barra-relleno();
}

/* Relleno de la barra en Firefox, Waterfox, Tor Browser… */
.barrajuego::-moz-progress-bar {
  @include barra-relleno();
}

/* Relleno de la barra en IE y Egde */
.barrajuego::-ms-fill {
  @include barra-relleno();
  border: none; /* ¡Explorer añade un borde al relleno! */
}

/* ESTILOS PERSONALIZADOS PARA EL PROGRESS-POLYFILL (IE8-9) */
progress[role] {
  @include barra-fondo();
}

progress[role]:before {
  @include barra-relleno();
}

progress[role]:after {
  display: none;
}

progress[role] > span {
  display: none;
}


body {
  margin: 32px;
  text-align: center;
}

var bp = document.getElementById('bp');
setTimeout(tick, 1000);
function tick() {
  bp.value = bp.value % bp.max + 0.5;
  bp.querySelector('.pval').textContent = bp.value;
  setTimeout(tick, 1000);
}