Círculo de progreso de CSS [cerrado]

112

He buscado en este sitio web para encontrar barras de progreso, pero las que he podido encontrar muestran círculos animados que llegan al 100%.

Me gustaría que se detuviera en ciertos porcentajes, como en la siguiente captura de pantalla. ¿Hay alguna forma de que pueda hacerlo usando solo CSS?

Barras de progreso circulares

html css progress-bar progress css-shapes Adam Gun, Shaid dijo
fuente
No estoy buscando una secuencia de comandos, estoy buscando información de CSS3 al respecto.
Adam GunShy Said
8
No importa la redacción, la pregunta "¿Cómo hacer Css Progress Circle?" aun es válido. Creo que esto debería reabrirse con una nueva redacción, este resultado es el primero en las búsquedas y contiene respuestas desactualizadas.
Ciantic
¿De qué sitio web es esa captura de pantalla?
MoralCode
10
Este es el resultado número uno en google para 'css indicador de progreso circular'. Una pena que la pregunta esté cerrada.
Gopherkhan
Si está usando MENOS, podría estar interesado en cssscript.com/pure-css-circular-percentage-bar
jchook

Respuestas:

119

Creé un tutorial sobre cómo hacer exactamente eso con CSS3 y la biblioteca LESS JavaScript. Puede encontrar la publicación de blog aquí: https://medium.com/secoya-tech/a917b80c43f9

Aquí hay un jsFiddle del resultado final. El porcentaje se establece mediante el data-progressatributo. Los cambios se animan mediante transiciones CSS.

gif de indicador de progreso radial

andsens
fuente
3
No tenía idea de que pudieras hacer esto con css. Agradable.
Hobbes
4
Sin embargo, gran impacto en el rendimiento ... haciéndolo inutilizable para mi aplicación = [
Hobbes
2
Excelente material. Un problema menor en Firefox (usando la edición para desarrolladores 41.0a2) crea bordes afilados visibles durante la transformación. Fácil de ver si establece el progreso en 90 y el tiempo de transición en 10 segundos. Para solucionarlo, simplemente agregue outline: 1px solid transparent;al .mask, .fill, .shadowgrupo.
luopio
5
@Hobbes, no puedes, el cartel miente. Esta respuesta usa grandes cantidades de Javascript a través de una biblioteca llamada LESS.
GetFree
6
He creado una versión de Sass, en caso de que alguien quiera probarlo: gist.github.com/digitalbreed/84a19db69244b22519e03550ba010a25
digitalbreed
78

Creé un violín usando solo CSS .

.wrapper {
  width: 100px; /* Set the size of the progress bar */
  height: 100px;
  position: absolute; /* Enable clipping */
  clip: rect(0px, 100px, 100px, 50px); /* Hide half of the progress bar */
}
/* Set the sizes of the elements that make up the progress bar */
.circle {
  width: 80px;
  height: 80px;
  border: 10px solid green;
  border-radius: 50px;
  position: absolute;
  clip: rect(0px, 50px, 100px, 0px);
}
/* Using the data attributes for the animation selectors. */
/* Base settings for all animated elements */
div[data-anim~=base] {
  -webkit-animation-iteration-count: 1;  /* Only run once */
  -webkit-animation-fill-mode: forwards; /* Hold the last keyframe */
  -webkit-animation-timing-function:linear; /* Linear animation */
}

.wrapper[data-anim~=wrapper] {
  -webkit-animation-duration: 0.01s; /* Complete keyframes asap */
  -webkit-animation-delay: 3s; /* Wait half of the animation */
  -webkit-animation-name: close-wrapper; /* Keyframes name */
}

.circle[data-anim~=left] {
  -webkit-animation-duration: 6s; /* Full animation time */
  -webkit-animation-name: left-spin;
}

.circle[data-anim~=right] {
  -webkit-animation-duration: 3s; /* Half animation time */
  -webkit-animation-name: right-spin;
}
/* Rotate the right side of the progress bar from 0 to 180 degrees */
@-webkit-keyframes right-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(180deg);
  }
}
/* Rotate the left side of the progress bar from 0 to 360 degrees */
@-webkit-keyframes left-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
/* Set the wrapper clip to auto, effectively removing the clip */
@-webkit-keyframes close-wrapper {
  to {
    clip: rect(auto, auto, auto, auto);
  }
}
<div class="wrapper" data-anim="base wrapper">
  <div class="circle" data-anim="base left"></div>
  <div class="circle" data-anim="base right"></div>
</div>
Expandir fragmento

También revisa este violín aquí (solo CSS)

@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400);
    
.arc1 {
    width: 160px;
    height: 160px;
    background: #00a0db;
    -webkit-transform-origin: -31% 61%;
    margin-left: -30px;
    margin-top: 20px;
    -webkit-transform: translate(-54px,50px);
    -moz-transform: translate(-54px,50px);
    -o-transform: translate(-54px,50px);
}
.arc2 {
    width: 160px;
    height: 160px;
    background: #00a0db;
    -webkit-transform: skew(45deg,0deg);
    -moz-transform: skew(45deg,0deg);
    -o-transform: skew(45deg,0deg);
    margin-left: -180px;
    margin-top: -90px;
    position: absolute;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
}

.arc-container:hover .arc2 {
    margin-left: -50px;
    -webkit-transform: skew(-20deg,0deg);
    -moz-transform: skew(-20deg,0deg);
    -o-transform: skew(-20deg,0deg);
}

.arc-wrapper {
    width: 150px;
    height: 150px;
    border-radius:150px;
    background: #424242;
    overflow:hidden;
    left: 50px;
    top: 50px;
    position: absolute;
}
.arc-hider {
    width: 150px;
    height: 150px;
    border-radius: 150px;
    border: 50px solid #e9e9e9;
    position:absolute;
    z-index:5;
    box-shadow:inset 0px 0px 20px rgba(0,0,0,0.7);
}

.arc-inset  {
    font-family: "Josefin Sans";
    font-weight: 100;
    position: absolute;
    font-size: 413px;
    margin-top: -64px;
    z-index: 5;
    left: 30px;
    line-height: 327px;
    height: 280px;
    -webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,0.2));
}
.arc-lowerInset {
    font-family: "Josefin Sans";
    font-weight: 100;
    position: absolute;
    font-size: 413px;
    margin-top: -64px;
    z-index: 5;
    left: 30px;
    line-height: 327px;
    height: 280px;
    color: white;
    -webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,0.2), rgba(0,0,0,1));
}
.arc-overlay {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(bottom, rgb(217,217,217) 10%, rgb(245,245,245) 90%, rgb(253,253,253) 100%);
    background-image: -o-linear-gradient(bottom, rgb(217,217,217) 10%, rgb(245,245,245) 90%, rgb(253,253,253) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(217,217,217) 10%, rgb(245,245,245) 90%, rgb(253,253,253) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(217,217,217) 10%, rgb(245,245,245) 90%, rgb(253,253,253) 100%);

    padding-left: 32px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    line-height: 100px;
    font-family: sans-serif;
    font-weight: 400;
    text-shadow: 0 1px 0 #fff;
    font-size: 22px;
    border-radius: 100px;
    position: absolute;
    z-index: 5;
    top: 75px;
    left: 75px;
    box-shadow:0px 0px 20px rgba(0,0,0,0.7);
}
.arc-container {
    position: relative;
    background: #e9e9e9;
    height: 250px;
    width: 250px;
}
<div class="arc-container">
    <div class="arc-hider"></div>
    <div class="arc-inset">
        o
    </div>
    <div class="arc-lowerInset">
        o
    </div>
    <div class="arc-overlay">
        35%
    </div>
    <div class="arc-wrapper">
        <div class="arc2"></div>
        <div class="arc1"></div>
    </div>
</div>
Expandir fragmento

O esta hermosa barra de progreso redonda con HTML5, CSS3 y JavaScript.

Panos Kal.
fuente
1
fromanegg.com/post/41302147556/100-pure-css-radial-progress-bar
Roko C. Buljan
@panos probé tu primera solución. Necesito que el borde del círculo sea de 6px en lugar de 10px. Lo mismo logré pero al llegar al 50%. Da un tirón y vuelve a empezar la animación. Sólo probar
Santhosh Kumar
@ Santosh-kumar, también necesitas cambiar otros valores
Panos Kal.
@panos ¿Cómo cambiaría el progreso de las primeras soluciones? ¿Podría hacerse con un elemento de datos? Soy bastante nuevo en la animación
anthonytherockjohnson
1
Según MDN clip ahora está en desuso.
jstaab
36

¿Y eso?

HTML

<div class="chart" id="graph" data-percent="88"></div>

Javascript

var el = document.getElementById('graph'); // get canvas

var options = {
    percent:  el.getAttribute('data-percent') || 25,
    size: el.getAttribute('data-size') || 220,
    lineWidth: el.getAttribute('data-line') || 15,
    rotate: el.getAttribute('data-rotate') || 0
}

var canvas = document.createElement('canvas');
var span = document.createElement('span');
span.textContent = options.percent + '%';

if (typeof(G_vmlCanvasManager) !== 'undefined') {
    G_vmlCanvasManager.initElement(canvas);
}

var ctx = canvas.getContext('2d');
canvas.width = canvas.height = options.size;

el.appendChild(span);
el.appendChild(canvas);

ctx.translate(options.size / 2, options.size / 2); // change center
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg

//imd = ctx.getImageData(0, 0, 240, 240);
var radius = (options.size - options.lineWidth) / 2;

var drawCircle = function(color, lineWidth, percent) {
        percent = Math.min(Math.max(0, percent || 1), 1);
        ctx.beginPath();
        ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
        ctx.strokeStyle = color;
        ctx.lineCap = 'round'; // butt, round or square
        ctx.lineWidth = lineWidth
        ctx.stroke();
};

drawCircle('#efefef', options.lineWidth, 100 / 100);
drawCircle('#555555', options.lineWidth, options.percent / 100);

y CSS

div {
    position:relative;
    margin:80px;
    width:220px; height:220px;
}
canvas {
    display: block;
    position:absolute;
    top:0;
    left:0;
}
span {
    color:#555;
    display:block;
    line-height:220px;
    text-align:center;
    width:220px;
    font-family:sans-serif;
    font-size:40px;
    font-weight:100;
    margin-left:5px;
}

http://jsfiddle.net/Aapn8/3410/

El código básico se tomó de Simple PIE Chart http://rendro.github.io/easy-pie-chart/

OzzyCheca
fuente
Esta fue la mejor solución para mí (¡no jquery también!).
Andy B
2
Para mí también. A continuación se muestra cómo animarlo: drawCircle ('# efefef', options.lineWidth, 100/100); var i = 0; var int = setInterval (function () {i ++; drawCircle ('# 555555', options.lineWidth, i / 100); span.textContent = i + "%"; if (i> = 100) {clearInterval (int);} }, 100);
marlar
1
¿Cómo configurar colores degradados en el círculo?
yaniv14
jsFiddle no muestra una barra en Chrome.
Esamo
10

Otra solución pura basada en CSS que se basa en dos elementos redondeados recortados que giro para llegar al ángulo correcto:

http://jsfiddle.net/maayan/byT76/

Ese es el CSS básico que lo habilita:

.clip1 {
    position:absolute;
    top:0;left:0;
    width:200px;
    height:200px;
    clip:rect(0px,200px,200px,100px);
}
.slice1 {
    position:absolute;
    width:200px;
    height:200px;
    clip:rect(0px,100px,200px,0px);
    -moz-border-radius:100px;
    -webkit-border-radius:100px; 
    border-radius:100px;
    background-color:#f7e5e1;
    border-color:#f7e5e1;
    -moz-transform:rotate(0);
    -webkit-transform:rotate(0);
    -o-transform:rotate(0);
    transform:rotate(0);
}

.clip2 
{
    position:absolute;
    top:0;left:0;
    width:200px;
    height:200px;
    clip:rect(0,100px,200px,0px);
}

.slice2
{
    position:absolute;
    width:200px;
    height:200px;
    clip:rect(0px,200px,200px,100px);
    -moz-border-radius:100px;
    -webkit-border-radius:100px; 
    border-radius:100px;
    background-color:#f7e5e1;
    border-color:#f7e5e1;
    -moz-transform:rotate(0);
    -webkit-transform:rotate(0);
    -o-transform:rotate(0);
    transform:rotate(0);
}

y el js lo gira según sea necesario.

bastante fácil de entender ..

Espero que te ayude, Maayan

Maayan
fuente
1
Dentro de jQuery, no es necesario configurar todo el -vendor-prefixesinterior .css()♪ Solo usotransform: 'rotate(' + degree + 'deg)'
Roko C. Buljan
1
Esto es más fácil y limpio, trabajé a partir del ejemplo de @Maayan y obtuve esto: jsfiddle.net/g8z64Ler
lukart