html5 - colocar - progress bar bootstrap

Cómo diseñar un elemento de progreso HTML5 como círculo/circular con CSS puro

Question

HTML5 introdujo un nuevo elemento de "progreso" que, de forma predeterminada, se representa como una barra de progreso (termómetro).

Un ejemplo muy básico es:

<progress max="100" value="85"></progress>

He estado experimentando con una variedad de opciones de círculo de progreso usando javascript, y también me han impresionado mucho algunos enfoques de CSS puros que se analizan aquí: CSS Progress Circle

¿Me interesa saber si alguien ha aplicado CSS correctamente al elemento "progreso" para proporcionar una representación circular / reloj / círculo en lugar de una visualización lineal?

EDITAR / ADICION: El elemento "metro" también es bastante similar a "progreso" pero ofrece un rango alto / bajo ... Lo menciono más para cualquiera que pueda encontrar este post en el futuro y quiera aplicar una técnica similar al elemento medidor HTML5.

Answer 1

Bueno, eso es un reto interesante.

El elemento tiene bastantes estilos predeterminados aplicados por el navegador e incluso el sistema operativo.

<progress max="100" value="85"></progress>

Así que primero, deberíamos deshacernos de la propiedad de appearance estableciéndola en ninguna.

progress {
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
}

<progress max="100" value="85"></progress>

Luego, los estilos adicionales son creados por los pseudo-elementos del navegador. Por ejemplo, si está viendo esta respuesta en cualquier navegador webkit, el fragmento de código anterior aún mostrará un cuadro plano con un relleno verde que representa el progreso.

Esos pseudo-elementos pueden ser abordados en CSS también. Cada navegador tiene sus pseudo elementos específicos , lo que complica aún más el problema.

Webkit apila 3 pseudo elementos, en la siguiente jerarquía

mientras que Gecko y Trident utilizan un solo pseudo-elemento para las barras de relleno de progreso, ::-moz-progress-bar y ::-ms-fill , respectivamente.

progress {
/*gets rid of default appearance*/
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
/*styles as any good ol'' div would */
  border: 1px solid black;
  display:block;
  width:100px; height:100px;
  background:chartreuse;
}

/* gets rid of default pseudo-elements */
::-webkit-progress-inner-element {display:none}
/*for some reason, Firefox won''t let the display or the content of this pseudo-element
set to none, so height:0 should do the trick. Maybe visibility:hidden too.*/
::-moz-progress-bar{height: 0;}
::-ms-fill {display:none; }

<progress max="100" value="85"></progress>

Eso debería dejarnos con el elemento de progreso con el estilo de un buen div div, que podemos usar para cualquiera de los métodos de la barra de progreso del círculo vinculados anteriormente, al mismo tiempo que somos impresionantes en la semántica. Incluso podríamos usar los pseudo elementos predeterminados y diseñarlos según sea necesario en lugar de crear divs anidados y ese tipo de mumbo jumbo.

Esto es, por supuesto, altamente experimental y no estándar, por lo que no debe utilizarse para la producción. Sin embargo, el soporte es un tanto decente, ya que todos los jugadores principales obtienen algún tipo de propiedad de apariencia , y los tres motores principales son compatibles con el estilo de los pseudo elementos ... así que quizás retire mi declaración anterior y la cambie por " solo tengo que ser extra cuidadoso "

Answer 2

Tratar de hacer esto en CSS puro es bastante difícil, así que no creo que esta sea la técnica correcta para hacerlo.

De todos modos, solo como un ejercicio técnico, intentémoslo. (Probado solo en Chrome!)

En primer lugar la base. Vamos a dividir el círculo en 4 cuadrantes, y para cada uno necesitaremos un estilo diferente. Aquí tenemos los estilos, que muestran en color (verde, rojo, azul, amarillo) el rango útil del elemento de valor de progreso. El área gris es el resto del elemento, no utilizado.

.test {
  width: 100px;
  height: 100px;
  margin: 20px 10px 0px 20px;
  border-radius: 50%;
  background-image: radial-gradient(lightblue 62%, blue 40%);
  position: relative;
  display: inline-block;
}

.test div {
 height: 30%;
 transform-origin: left top;
    position: absolute;
    opacity: 0.5;
 ackground-color: green;
}

.inner1 {
 width: 25%;
 left: 50%;
    top: -20%;
 background-color: green;
 transform: rotate(45deg) scaleX(3.9598);
}

.inner2 {
 width: 50%;
 left: 190%;
    top: -20%;
 background-image: linear-gradient(to right,gray 50%, red 50%);
 transform: rotate(135deg) scaleX(3.9598);
}

.inner3 {
 width: 75%;
 left: 190%;
    top: 260%;
 background-image: linear-gradient(to right,gray 66%, blue 66%);
 transform: rotate(225deg) scaleX(3.9598);
}

.inner4 {
 width: 100%;
 left: -230%;
    top: 260%;
 background-image: linear-gradient(to right,gray 75%, yellow 66%);
 transform: rotate(315deg) scaleX(3.9598);
}

<div class="test">
    <div class="inner1"></div>
</div>
<div class="test">
    <div class="inner2"></div>
</div>
<div class="test">
    <div class="inner3"></div>
</div>
<div class="test">
    <div class="inner4"></div>
</div>

Ahora, vamos a mostrar un truco para crear los segmentos radiales. Esto se puede lograr configurando un elemento normal (en ángulo recto) para el usuario, y aplicando cierta perspectiva:

div {
 width: 300px;
 height: 300px;
 position: relative;
}

.container {
 perspective: 400px;
 margin: 40px 200px;
 border: solid 1px black;
}

.top {
    position: absolute;
    left: 0px;
    top: -100%;
    background-image: repeating-linear-gradient(to right, tomato 0px, white 20px);
    transform: rotateX(90deg);
    transform-origin: center bottom; 
}

.right {
    position: absolute;
    left: 100%;
    top: 0px;
    background-image: repeating-linear-gradient( tomato 0px, white 20px);
    transform: rotateY(90deg);
    transform-origin: left center; 
}

.bottom {
    position: absolute;
    left: 0px;
    bottom: 0px;
    background-image: repeating-linear-gradient(to right, tomato 0px, white 20px);
    transform: rotateX(90deg);
    transform-origin: center bottom; 
}

.left {
    position: absolute;
    right: 100%;
    top: 0px;
    background-image: repeating-linear-gradient( tomato 0px, white 20px);
    transform: rotateY(-90deg);
    transform-origin: right center; 
}

<div class="container">
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
</div>

Y ahora, solo algunos selectores aburridos (es difícil apuntar valores en el rango 20-29 y no apuntar el valor 2 al mismo tiempo).

Un poco de JS, pero solo para controlar el valor del progreso. Puede utilizar tanto la entrada como el control deslizante para cambiarla.

function change () {
    var input = document.getElementById("input");
    var progress = document.getElementById("test");
    progress.value = input.value;
}

function changeNumber () {
    var input = document.getElementById("number");
    var progress = document.getElementById("test");
    progress.value = input.value;
}

.container {
 width: 500px;
 height: 500px;
 overflow: hidden;
 margin: 10px;
}
.test {
  width: 200px;
  height: 200px;
  margin: 10px 10px;
  border-radius: 50%;
  background-image: radial-gradient(lightblue 62%, transparent 40%);
  box-shadow: 0px 0px 0px 500px lightblue, inset 0px 0px 0px 2px lightblue;
}



.test::-webkit-progress-bar {
 background-color: transparent;
 position: relative;
    border-radius: 50%;
    perspective: 100px;
    z-index: -1;
 background-repeat: no-repeat;
}

.test[value^="2"]::-webkit-progress-bar,
.test[value^="3"]::-webkit-progress-bar 
{
 background-image: linear-gradient(red, red);
 background-size: 50% 50%;
 background-position: right top;
}

.test[value^="4"]::-webkit-progress-bar,
.test[value^="5"]::-webkit-progress-bar 
{
 background-image: linear-gradient(purple, purple);
 background-size: 50% 100%;
 background-position: right top;
}

.test[value^="6"]::-webkit-progress-bar,
.test[value^="7"]::-webkit-progress-bar,
.test[value="80"]::-webkit-progress-bar 
{
 background-image: linear-gradient(blue, blue), linear-gradient(blue, blue);
 background-size: 50% 100%, 50% 50%;
 background-position: right top, left bottom;
}



.test::-webkit-progress-bar, 
.test[value="2"]::-webkit-progress-bar, 
.test[value="3"]::-webkit-progress-bar, 
.test[value="4"]::-webkit-progress-bar, 
.test[value="5"]::-webkit-progress-bar, 
.test[value="6"]::-webkit-progress-bar, 
.test[value="7"]::-webkit-progress-bar, 
.test[value="8"]::-webkit-progress-bar {
 background-image: none;
 
} 

.test::-webkit-progress-value {
 background-color: green;
 height: 30%;
 transform-origin: left top;
 z-index: -1;
    position: absolute;
}

.test[value^="2"]::-webkit-progress-value,
.test[value^="3"]::-webkit-progress-value {
 background-color: red;
    top: -20%;
    left: 190%;
    transform: rotate(135deg) rotateX(-90deg) scaleX(3.9598);
}



.test[value^="4"]::-webkit-progress-value,
.test[value^="5"]::-webkit-progress-value {
 background-color: purple;
    left: 190%;
    top: 260%;
    transform: rotate(225deg) rotateX(-90deg) scaleX(3.9598);
}

.test[value^="6"]::-webkit-progress-value,
.test[value^="7"]::-webkit-progress-value,
.test[value="80"]::-webkit-progress-value {
 background-color: blue;
    left: -230%;
    top: 260%;
    transform: rotate(315deg) rotateX(-90deg) scaleX(3.9598);
}

.test::-webkit-progress-value, 
.test[value="2"]::-webkit-progress-value, 
.test[value="3"]::-webkit-progress-value, 
.test[value="4"]::-webkit-progress-value, 
.test[value="5"]::-webkit-progress-value, 
.test[value="6"]::-webkit-progress-value, 
.test[value="7"]::-webkit-progress-value, 
.test[value="8"]::-webkit-progress-value 
{
 background-color: green;
     left: 50%;
     top: -20%;
     transform: rotate(45deg) rotateX(-90deg) scaleX(3.9598);
}

<input id="input" type="range" value="0" min="0" max="80" onchange="change()" oninput="change()"/>
<input id="number" type="number" value="0" min="0" max="80" step="1" oninput="changeNumber()"/>
<div class="container">
<progress class="test" id="test" max="80" value="0"></progress>
</div>

Hay una dificultad en el desbordamiento: oculto; Y un error en Chrome. No se espera que trabaje en el mismo elemento donde se aplica la perspectiva, pero debería funcionar aplicado al progreso mismo. Solo funciona la mitad del tiempo ...

Además, otra idea, el estilo es mucho más simple, y podría lograr que se extienda a toda la gama, pero de todos modos es un punto de partida:

function change () {
    var input = document.getElementById("input");
    var progress = document.getElementById("test");
    progress.value = input.value;
}

function changeNumber () {
    var input = document.getElementById("number");
    var progress = document.getElementById("test");
    progress.value = input.value;
}

.test {
  width: 400px;
  height: 200px;
  margin: 10px 10px;
  border-radius: 9999px 9999px 0px 0px;
  border: solid 1px red;
  ackground-image: radial-gradient(lightblue 62%, transparent 40%);
  ox-shadow: 0px 0px 0px 500px lightblue;
  overflow: hidden;
}



.test::-webkit-progress-bar {
 background-color: transparent;
 position: relative;
    border-radius: 50%;
    perspective: 100px;
    perspective-origin: center 300px;
    z-index: -1;
 background-repeat: no-repeat;
}


.test::-webkit-progress-value {
 height: 300%;
 transform-origin: center bottom;
 bottom: -20%;
 z-index: -1;
    position: absolute;
 background-image: linear-gradient(270deg, red 2px, tomato 30px);
    transform:  rotateX(-90deg) scaleX(1);
}

<input id="input" type="range" value="0" min="0" max="80" onchange="change()" oninput="change()">
<input id="number" type="number" value="0" min="0" max="80" step="1" oninput="changeNumber()">
<progress class="test" id="test" max="80" value="20"></progress>

Answer 3

Ejecutar mi código y ver el resultado.

.loader {
 position: relative;
 height: 100px;
 width: 100px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: red;
 margin:30px 30px;
 float:left;
}
.loader:before {
 content: "";
 background: white;
 position:absolute;
 z-index:100;
 width:98px;
 height:98px;
 border-radius:50%;
 margin:auto auto;
}
progress::-moz-progress-bar { background: transparent; }
progress::-webkit-progress-bar {background: transparent;}
progress::-moz-progress-value { background: red; }
progress::-webkit-progress-value { background: red; }
.circle {
 border-radius: 100%;
 overflow: hidden;
 padding:0;
}
.spin {
 animation: spin 2s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
html {
 height: 100%;
 display: flex;
}
body {
 margin: auto;
}

<progress max="100" value="95" class="spin circle loader"></progress>

<progress max="100" value="50" class="spin circle loader"></progress>

<progress max="100" value="10" class="spin circle loader"></progress>

Gracias a @G-Cyr , usé parte de una de sus respuestas ( here ) y la mezclé con mi solución para hacer que esta respuesta fuera más rápida.