Hola, descubrimos la solución a lo que andabas buscando, continúa leyendo y la verás a continuación.
Solución:
SVG para la victoria!
.item
position: relative;
float: left;
.item h2
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
svg
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
.circle_animation
stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
stroke-dashoffset: 440;
.html .circle_animation
-webkit-animation: html 1s ease-out forwards;
animation: html 1s ease-out forwards;
.css .circle_animation
-webkit-animation: css 1s ease-out forwards;
animation: css 1s ease-out forwards;
@-webkit-keyframes html
to
stroke-dashoffset: 80; /* 50% would be 220 (half the initial value specified above) */
@keyframes html
to
stroke-dashoffset: 80;
@-webkit-keyframes css
to
stroke-dashoffset: 160;
@keyframes css
to
stroke-dashoffset: 160;
HTML
CSS
Versión de JSFiddle
Aquí hay una versión con círculos de fondo como se solicita en los comentarios:
.item
position: relative;
float: left;
.item h2
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
svg
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
.circle_animation
stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
stroke-dashoffset: 440;
.html .circle_animation
-webkit-animation: html 1s ease-out forwards;
animation: html 1s ease-out forwards;
.css .circle_animation
-webkit-animation: css 1s ease-out forwards;
animation: css 1s ease-out forwards;
@-webkit-keyframes html
to
stroke-dashoffset: 80; /* 50% would be 220 (half the initial value specified above) */
@keyframes html
to
stroke-dashoffset: 80;
@-webkit-keyframes css
to
stroke-dashoffset: 160;
@keyframes css
to
stroke-dashoffset: 160;
HTML
CSS
¿Como funciona?
stroke-dasharray se utiliza para definir el “patrón” que utiliza una línea discontinua (MDN). Al proporcionar un valor único, crea un patrón con una raya de 440 px y un espacio de 440 px. (440px es aproximadamente la circunferencia del círculo).
stroke-dashoffset mueve efectivamente el punto de inicio del patrón de trazos (MDN).
A dash-offset de 220 (la mitad del stroke-dasharray) produciría un semicírculo. 110 = cuarto de círculo, etc.
Escribí esto como respuesta a un comentario, pero era demasiado largo:
hm … bueno, aquí hay un violín para el segundo círculo http://jsfiddle.net/LgtV2/ …. tiene 3 partes circulares. el primer círculo (100%) tiene 5 partes. deberías jugar con el violín para aprender cómo funciona y así poder replicarlo. Nunca he hecho esto antes y solo estoy mirando el enlace que publicó San, pero parece que esto solo usa múltiples Divs con css3 TRANSFORM para formar las curvas, y los pseudo selectores: before y: after para animaciones. Las animaciones ocurren cuando la página se está cargando … EG:: antes de que se cargue div1 tiene una transformación de 5, se carga y tiene una transformación de 8,: después de que se carga tiene una transformación de 11.
código:
/*percentage STEPS (do not touch)*/
.full_percentage[data-percentage="100"]
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
.full_percentage[data-percentage="95"]
-webkit-transform: rotate(170deg);
-moz-transform: rotate(170deg);
-o-transform: rotate(170deg);
transform: rotate(170deg);
.full_percentage[data-percentage="90"]
-webkit-transform: rotate(155deg);
-moz-transform: rotate(155deg);
-o-transform: rotate(155deg);
transform: rotate(155deg);
.full_percentage[data-percentage="85"]
-webkit-transform: rotate(125deg);
-moz-transform: rotate(125deg);
-o-transform: rotate(125deg);
transform: rotate(125deg);
.full_percentage[data-percentage="80"]
-webkit-transform: rotate(110deg);
-moz-transform: rotate(110deg);
-o-transform: rotate(110deg);
transform: rotate(110deg);
.full_percentage[data-percentage="75"]
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
.full_percentage[data-percentage="70"]
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-o-transform: rotate(70deg);
transform: rotate(70deg);
.full_percentage[data-percentage="65"]
-webkit-transform: rotate(55deg);
-moz-transform: rotate(55deg);
-o-transform: rotate(55deg);
transform: rotate(55deg);
.full_percentage[data-percentage="60"]
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
-o-transform: rotate(35deg);
transform: rotate(35deg);
.full_percentage[data-percentage="55"]
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
.full_percentage[data-percentage="50"]
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
.half_percentage[data-percentage="50"]
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
.half_percentage[data-percentage="45"]
-webkit-transform: rotate(170deg);
-moz-transform: rotate(170deg);
-o-transform: rotate(170deg);
transform: rotate(170deg);
.half_percentage[data-percentage="40"]
-webkit-transform: rotate(155deg);
-moz-transform: rotate(155deg);
-o-transform: rotate(155deg);
transform: rotate(155deg);
.half_percentage[data-percentage="35"]
-webkit-transform: rotate(125deg);
-moz-transform: rotate(125deg);
-o-transform: rotate(125deg);
transform: rotate(125deg);
.half_percentage[data-percentage="30"]
-webkit-transform: rotate(110deg);
-moz-transform: rotate(110deg);
-o-transform: rotate(110deg);
transform: rotate(110deg);
.half_percentage[data-percentage="25"]
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
.half_percentage[data-percentage="20"]
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-o-transform: rotate(70deg);
transform: rotate(70deg);
.half_percentage[data-percentage="15"]
-webkit-transform: rotate(55deg);
-moz-transform: rotate(55deg);
-o-transform: rotate(55deg);
transform: rotate(55deg);
.half_percentage[data-percentage="10"]
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
-o-transform: rotate(35deg);
transform: rotate(35deg);
.half_percentage[data-percentage="5"]
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
.half_percentage[data-percentage="0"]
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
/*
*
* THE SECOND EXAMPLE
* the second example for a max percentuage of 50% in this case
*
*/
/*COLOR and STYLES (note: you can use gradients for the class full_bar_color)*/
.half_bar_color
background: #3498db;
/*start chart pie code*/
.half_pie
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
background: #fff;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
/*the background white circular color*/
.half_pie:before
content:'';
display: block;
position: absolute;
z-index: -1;
width: 220px;
height: 220px;
top: -10px;
left: -10px;
background: #fff;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
/*color white #fff to fix the rendering problem*/
.half_pie:after
content:'';
display: block;
position: absolute;
z-index: 10;
width: 198px;
height: 198px;
top: 1px;
left: 1px;
-webkit-box-shadow: 0px 0px 0px 2px #fff, inset 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 0px 2px #fff, inset 0 0 5px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 0px 2px #fff, inset 0 0 5px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
/*the icon*/
span.half_pie_icon
position: absolute;
z-index: 5;
top: 25px;
left: 25px;
width: 150px;
height: 150px;
font-size: 3em;
line-height: 150px;
text-align: center;
color: #e0e0e0;
background: #fff;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
/*ONE*/
.half_part_pie_one
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
clip: rect(0px 100px 200px 0px);
/*TWO*/
.half_part_pie_two
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
background: #fff;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
clip: rect(0px 100px 200px 0px);
/*THREE*/
.half_part_pie_three
position: absolute;
z-index: 3;
width: 100%;
height: 100%;
background: #fff;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
clip: rect(0px 200px 200px 100px);
-webkit-animation: half_third 4s linear;
-moz-animation: half_third 4s linear;
-o-animation: half_third 4s linear;
animation: half_third 4s linear;
opacity: 0;
/*THIRD animation*/
@-webkit-keyframes half_third
0%
opacity: 1;
-webkit-transform: rotate(0deg);
100%
opacity: 1;
-webkit-transform: rotate(180deg);
@-moz-keyframes half_third
0%
opacity: 1;
-moz-transform: rotate(0deg);
100%
opacity: 1;
-moz-transform: rotate(180deg);
@-o-keyframes half_third
0%
opacity: 1;
-o-transform: rotate(0deg);
100%
opacity: 1;
-o-transform: rotate(180deg);
@keyframes half_third
0%
opacity: 1;
transform: rotate(0deg);
100%
opacity: 1;
transform: rotate(180deg);
He modificado un fragmento que encontré en la web para hacer un gráfico de anillos simple usando solo HTML y CSS, aquí está el resultado:
.block
margin: 25px 25px 0 0;
background: #394264;
border-radius: 5px;
float: left;
width: 300px;
overflow: hidden;
.donut-chart-block
overflow: hidden;
.donut-chart
position: relative;
width: 200px;
height: 200px;
margin: 2rem auto;
border-radius: 100%
.donut-chart .center
background: #394264;
position: absolute;
top: 30px;
left: 30px;
height: 140px;
width: 140px;
border-radius: 70px;
.clip
border-radius: 50%;
clip: rect(0px, 200px, 200px, 100px);
height: 100%;
position: absolute;
width: 100%;
.item
border-radius: 50%;
clip: rect(0px, 100px, 200px, 0px);
height: 100%;
position: absolute;
width: 100%;
font-family: monospace;
font-size: 1.5rem;
#section1
transform: rotate(0deg);
#section1 .item
background-color: #E64C65;
transform: rotate(76deg);
#section2
transform: rotate(76deg);
#section2 .item
background-color: #11A8AB;
transform: rotate(140deg);
#section3
transform: rotate(215deg);
#section3 .item
background-color: #4FC4F6;
transform: rotate(113deg);
#section4
transform: rotate(-32deg);
#section4 .item
background-color: #FCB150;
transform: rotate(32deg);
Decidió publicarlo aquí como una alternativa a las otras respuestas. ¡Salud!
Si crees que ha resultado provechoso este artículo, sería de mucha ayuda si lo compartes con más seniors de este modo nos ayudas a dar difusión a nuestra información.
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)