<body>
<div class="contenedor">
<div class="grupo">
<div id="progress-element">
<svg id="elemento" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 160 160">
<defs>
<style>
.cls-3,
.cls-6 {
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 18px;
}
.cls-3 {
stroke: #2d2d2d;
opacity: 0.2;
}
.cls-4 {
opacity: 0.08;
}
.cls-12,
.cls-4 {
mix-blend-mode: multiply;
}
.cls-5 {
fill: #fff;
}
.cls-6 {
stroke: #fff;
}
.cls-7 {
fill: #fec48c;
}
.cls-8 {
fill: #ffb577;
}
.cls-9 {
fill: #702102;
}
.cls-10 {
fill: #91350a;
}
.cls-11 {
fill: #eb8851;
}
.cls-12 {
opacity: 0.25;
fill: url(#Degradado_sin_nombre_9);
}
.cls-13 {
fill: #a45427;
}
.cls-14 {
fill: #67240e;
}
.cls-15 {
fill: #621601;
}
.cls-16 {
fill: #bec5cb;
}
.cls-17 {
fill: #9b4646;
}
.cls-18 {
fill: #b56666;
}
</style>
<radialGradient id="Degradado_sin_nombre_9" data-name="Degradado sin nombre 9" cx="79.91" cy="408.95" r="14.93" gradientTransform="translate(0 -113.42) scale(1 0.49)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ff3a00" />
<stop offset="1" stop-color="#fff" />
</radialGradient>
</defs>
<title>inteligiometro</title>
<circle id="fondo" cx="80" cy="80" r="80" />
<path id="guia" class="cls-3" d="M34.77,125.23a64,64,0,1,1,90.46,0" />
<circle class="cls-5" cx="80" cy="80" r="47" />
<path class="cls-6 indicador" d="M34.77,125.23a64,64,0,1,1,90.46,0" />
<g id="cara">
<g id="caraBase">
<path class="cls-7" d="M100.49,59.18c-1.63-3.26-9.4-11-20.58-11.22-11.18.2-19,8-20.58,11.22-2.5,5-2.5,46-1.73,49.05s15,13.47,22.31,13.66c7.31-.19,21.54-10.58,22.31-13.66S103,64.18,100.49,59.18Z" />
<path class="cls-8" d="M78.18,64.61c-0.22,2-2,8.08-2,9.09-0.07,1.59,1.36,4.39,1.08,6S77,91,75.65,94s-1.66,4.26-1.3,4.4a20,20,0,0,0,3.61,2c-0.65.58-1.8,5.19-1.8,5.19-1.44.29-.29,4.69,0.22,5.92s2.81,8,2.81,9.31c-3.68-1-8.94-1.95-21-12.7C57.84,98.88,58.12,84,58.27,82s1.37-17.38,1.95-18.25c1.51-.72,4.47-1.88,4.47-1.88A16,16,0,0,0,78.18,64.61Z" />
<path class="cls-9" d="M56.2,77.29c0.3,0.87,1,6,1,6C57.66,79.53,58.51,63.8,59.31,63s4.93-1.93,5.53-1.73c1.61,1.12,7.95,4.89,15,2.55s14.89-4.58,18.41-1.63,4.23,25.45,4.23,25.86c0.7-5,.2-9.77,3.22-13.13,0,0,3-19.55,2.62-20.46-2.31-1-2.82-4.89-2.41-6.21-3.12,1.43-7.44-.71-10.36-1.83s-18-8-29.78-4.17-9.76,8-9.76,8a20.53,20.53,0,0,1,2,1.93c-2.82,1.53-5.43,3.77-5.53,5C52.17,59.53,54,74.7,54,74.7A5.55,5.55,0,0,1,56.2,77.29Z" />
<path class="cls-10" d="M71.24,48.13c-2.57.71-9.2,3.11-9.66,3.05-1.11-.66-1.86-3.77-1.26-4.12s7.54-5.8,14.49-5,25,8.88,29.22,8c0.15,1.45,2.26,4.5,3.32,5.19a33.46,33.46,0,0,1-1.28,6.41l-4,1.45-0.45-3.74c1.43-1.83,3.55-4.89,3.55-4.89-1.89,1.3-7.7,3.82-13.88,4.5s-13.13,2.75-19,0c1.66-1.68,5-4.73,5-4.73a107.25,107.25,0,0,1-11,4.43c-2-.53-3-4.89-3-4.89C63.82,52.58,71.24,48.13,71.24,48.13Z" />
<path class="cls-7" d="M102.46,85.39c0.38-1.64-.58-8.8,3.13-11.35s5,2.31,4.23,4.71-1.15,14.19-7.17,12.79C102.46,87.6,102.46,85.39,102.46,85.39Z" />
<path class="cls-11" d="M106.36,76.4c-1,1.15-3,5.1-2.5,5.1s2.07-2.26,2.31-1.68,0.63,5.63-1.44,7.93C106.65,86.16,109.68,80.63,106.36,76.4Z" />
<path class="cls-7" d="M57.54,85.39c-0.38-1.64.58-8.8-3.13-11.35s-5,2.31-4.23,4.71,1.15,14.19,7.17,12.79C57.54,87.6,57.54,85.39,57.54,85.39Z" />
<path class="cls-11" d="M53.64,76.4c1,1.15,3,5.1,2.5,5.1s-2.07-2.26-2.31-1.68-0.63,5.63,1.44,7.93C53.35,86.16,50.32,80.63,53.64,76.4Z" />
<path class="cls-11" d="M77.39,78.79c0,0.41,0,.85,0,1.26s0,0.84,0,1.25q0,1.25-.11,2.5-0.14,2.5-.39,5c-0.17,1.66-.37,3.33-0.66,5-0.14.83-.31,1.66-0.52,2.49q-0.16.62-.38,1.25a5,5,0,0,1-.65,1.27h0L74.6,98a10.15,10.15,0,0,0,2.09,1.39,9.41,9.41,0,0,0,1.17.49L78.47,100c0.2,0.05.42,0.1,0.6,0.13h0l-0.16,0A34.05,34.05,0,0,0,83.8,98h0a0.29,0.29,0,0,1,.28.5,34.68,34.68,0,0,1-4.92,2.43l-0.07,0H79a6.85,6.85,0,0,1-.71-0.09l-0.68-.15a10.35,10.35,0,0,1-1.32-.44,11.23,11.23,0,0,1-2.43-1.37l-0.44-.33,0.35-.51h0a4,4,0,0,0,.51-0.94c0.15-.36.28-0.74,0.4-1.13,0.24-.77.43-1.57,0.61-2.38,0.35-1.61.62-3.25,0.86-4.89s0.43-3.29.6-4.95q0.12-1.24.21-2.48C77,80.87,77,80.46,77,80s0-.82,0-1.23a0.17,0.17,0,0,1,.16-0.18A0.17,0.17,0,0,1,77.39,78.79Z" />
</g>
<g id="face1">
<ellipse class="cls-12" cx="79.91" cy="86.11" rx="14.93" ry="7.29" />
<path class="cls-5" d="M70.31,104.43c-0.63.43-.58,2.07-0.38,3.17s1.68,4.91,4.18,4,10.77,0,12,.24,4-3.8,3.56-7.12a2.61,2.61,0,0,0-.77-1s-17.75.1-18,.14A1.24,1.24,0,0,0,70.31,104.43Z" />
<path class="cls-11" d="M90.06,105c-0.14-1.54-.38-1.64-1.68-1.59s-17.6,0-18.23.29-1.06,1.15-.53,1.59,0.72-.53,2.12-0.72S88,104,88.42,104.29,88.71,105.25,90.06,105Z" />
<g id="_Grupo_" data-name="<Grupo>">
<g id="_Grupo_2" data-name="<Grupo>">
<path class="cls-5" d="M86.22,80.34c0.29,1.45,2.27,3.32,5.16,3s4.87-1.8,4.8-2.79-1.95-3-5.23-2.54S86.73,79.1,86.22,80.34Z" />
<circle class="cls-13" cx="91.16" cy="80.64" r="1.95" />
<circle class="cls-14" cx="91.16" cy="80.64" r="0.97" />
<path class="cls-14" d="M86.22,80.34c0.63-1.35,3.41-1.83,5.24-1.64s3.92,0.6,4.71,1.88c-0.19-1.68-1.39-3.41-5-3.27S86.13,79.19,86.22,80.34Z" />
<circle class="cls-5" cx="92.44" cy="80.3" r="0.71" />
<path class="cls-15" d="M83.47,78.73c0.19,0.62,1.19,1.19,3.28.36,0.9-.36,6.92-7.12,10.63-7.18,0.94-.11,1.5-0.29,1.59-0.9a1.61,1.61,0,0,0-1.31-1.78c-5,0-13.57,7.12-13.9,7.77A2,2,0,0,0,83.47,78.73Z" />
</g>
<g id="_Grupo_3" data-name="<Grupo>">
<path class="cls-5" d="M73.63,80.34c-0.29,1.45-2.27,3.32-5.16,3s-4.87-1.8-4.8-2.79,1.95-3,5.23-2.54S73.12,79.1,73.63,80.34Z" />
<circle class="cls-13" cx="68.69" cy="80.64" r="1.95" />
<circle class="cls-14" cx="68.69" cy="80.64" r="0.97" />
<path class="cls-14" d="M73.63,80.34C73,79,70.21,78.51,68.38,78.7s-3.92.6-4.71,1.88c0.19-1.68,1.39-3.41,5-3.27S73.72,79.19,73.63,80.34Z" />
<circle class="cls-5" cx="67.41" cy="80.3" r="0.71" />
<path class="cls-15" d="M76.38,78.73c-0.19.62-1.19,1.19-3.28,0.36-0.9-.36-6.92-7.12-10.63-7.18-0.94-.11-1.5-0.29-1.59-0.9a1.61,1.61,0,0,1,1.31-1.78c5,0,13.57,7.12,13.9,7.77A2,2,0,0,1,76.38,78.73Z" />
</g>
</g>
<path class="cls-11" d="M83.39,79.43c-1-.19-2.31-2.74-2.07-3.65a34.46,34.46,0,0,1,2.26-4.23,9.45,9.45,0,0,0-2.93,4.91C80.84,77.21,81.94,79.28,83.39,79.43Z" />
<path class="cls-11" d="M86.83,82.58a5.65,5.65,0,0,0,6.56,3.25C92,87.12,87.62,87,86.83,82.58Z" />
<path class="cls-11" d="M73,82.58a5.65,5.65,0,0,1-6.56,3.25C67.77,87.12,72.17,87,73,82.58Z" />
<path class="cls-16" d="M89.28,106.74c-0.07.43-1.08,1.3-5.84,1,2.49,0.65,4.65.47,4.72,0.69,0.07,0.43-.22,1-0.11,1A5.26,5.26,0,0,0,89.28,106.74Z" />
<path class="cls-16" d="M70.4,106.69c0.14,0.48.58,1.49,4.42,1.3-2.12.72-3.65,0.77-3.65,1.35A3.59,3.59,0,0,1,70.4,106.69Z" />
</g>
<g id="face2">
<g id="_Grupo_4" data-name="<Grupo>">
<g id="_Grupo_5" data-name="<Grupo>">
<path class="cls-15" d="M83.47,78.73c0.19,0.62,1.19,1.19,3.28.36,0.9-.36,6.92-7.12,10.63-7.18,0.94-.11,1.5-0.29,1.59-0.9a1.61,1.61,0,0,0-1.31-1.78c-5,0-13.57,7.12-13.9,7.77A2,2,0,0,0,83.47,78.73Z" />
<path class="cls-5" d="M86.22,80.36c0.29,1.45,2.27,3.22,5.16,2.93s4.87-1.71,4.8-2.69-1.95-3-5.23-2.54S86.72,79.13,86.22,80.36Z" />
<circle class="cls-13" cx="91.15" cy="80.34" r="2.38" />
<circle class="cls-14" cx="91.15" cy="80.34" r="1.18" />
<path class="cls-14" d="M86.22,80.36c0.63-1.35,3.41-1.83,5.24-1.64s3.92,0.6,4.71,1.88c-0.19-1.68-1.39-3.41-5-3.27S86.12,79.21,86.22,80.36Z" />
<circle class="cls-5" cx="92.71" cy="79.93" r="0.87" />
</g>
<g id="_Grupo_6" data-name="<Grupo>">
<path class="cls-15" d="M76.38,78.73c-0.19.62-1.19,1.19-3.28,0.36-0.9-.36-6.92-7.12-10.63-7.18-0.94-.11-1.5-0.29-1.59-0.9a1.61,1.61,0,0,1,1.31-1.78c5,0,13.57,7.12,13.9,7.77A2,2,0,0,1,76.38,78.73Z" />
<path class="cls-5" d="M73.59,80.36c-0.29,1.45-2.27,3.22-5.16,2.93s-4.87-1.71-4.8-2.69,1.95-3,5.23-2.54S73.09,79.13,73.59,80.36Z" />
<circle class="cls-13" cx="68.66" cy="80.34" r="2.38" />
<circle class="cls-14" cx="68.66" cy="80.34" r="1.18" />
<path class="cls-14" d="M73.59,80.36C73,79,70.18,78.54,68.35,78.73s-3.92.6-4.71,1.88c0.19-1.68,1.39-3.41,5-3.27S73.69,79.21,73.59,80.36Z" />
<circle class="cls-5" cx="67.1" cy="79.93" r="0.87" />
</g>
</g>
<path class="cls-11" d="M70.43,108.64c0.22-.5-0.58-1.23.79-1.59s13.06-3.25,17.67-.07c0.07,1.37-.72,1.23-0.72,1.23a3.39,3.39,0,0,0-1.95-1.3c-1.44-.43-6.49-1.51-14.28.87C71.37,108.71,71.51,109.07,70.43,108.64Z" />
</g>
<g id="face3">
<path class="cls-11" d="M90.06,106.6c-0.14-1.54-.38-1.64-1.68-1.59s-17.6,0-18.23.29-1.06,1.15-.53,1.59,0.72-.53,2.12-0.72,16.3-.58,16.69-0.29S88.71,106.84,90.06,106.6Z" />
<g id="_Grupo_7" data-name="<Grupo>">
<g id="_Grupo_8" data-name="<Grupo>">
<path class="cls-5" d="M86.24,80.34c0.29,1.45,2.27,3.22,5.16,2.93s4.87-1.71,4.8-2.69S94.25,77.57,91,78,86.75,79.1,86.24,80.34Z" />
<circle class="cls-13" cx="91.17" cy="80.32" r="2.38" />
<circle class="cls-14" cx="91.17" cy="80.32" r="1.18" />
<path class="cls-14" d="M86.24,80.34c0.63-1.35,3.41-1.83,5.24-1.64s3.92,0.6,4.71,1.88c-0.19-1.68-1.39-3.41-5-3.27S86.15,79.19,86.24,80.34Z" />
<circle class="cls-5" cx="92.73" cy="79.91" r="0.87" />
<path class="cls-15" d="M84.94,74.73c0.19,0.62,1.19,1.19,3.28.36a11,11,0,0,1,3.88-1.15c2,0,4,.78,4.49.72,0.94-.11,1.5-0.29,1.59-0.9A1.61,1.61,0,0,0,96.87,72a17.12,17.12,0,0,0-5.06-.91c-2,0-6.26,1.28-6.58,1.93A2,2,0,0,0,84.94,74.73Z" />
</g>
<g id="_Grupo_9" data-name="<Grupo>">
<path class="cls-5" d="M73.58,80.34c-0.29,1.45-2.27,3.22-5.16,2.93s-4.87-1.71-4.8-2.69,1.95-3,5.23-2.54S73.07,79.1,73.58,80.34Z" />
<circle class="cls-13" cx="68.65" cy="80.32" r="2.38" />
<circle class="cls-14" cx="68.65" cy="80.32" r="1.18" />
<path class="cls-14" d="M73.58,80.34C73,79,70.16,78.51,68.33,78.7s-3.92.6-4.71,1.88c0.19-1.68,1.39-3.41,5-3.27S73.67,79.19,73.58,80.34Z" />
<circle class="cls-5" cx="67.08" cy="79.91" r="0.87" />
<path class="cls-15" d="M74.87,74.73c-0.19.62-1.19,1.19-3.28,0.36a11,11,0,0,0-3.88-1.15c-2,0-4,.78-4.49.72-0.94-.11-1.5-0.29-1.59-0.9A1.61,1.61,0,0,1,62.95,72,17.12,17.12,0,0,1,68,71.07c2,0,6.26,1.28,6.58,1.93A2,2,0,0,1,74.87,74.73Z" />
</g>
</g>
</g>
<g id="face4">
<path class="cls-11" d="M69.38,105.4c0.14,1.54.38,1.22,1.68,1.59a31.72,31.72,0,0,0,9.06,1.41c4.41,0,9.9-2.81,10.22-3,0.63-.29,1.06-1.15.53-1.59-0.17-.14-0.85.8-1.95,1.3a28.21,28.21,0,0,1-8.8,2.44C75.79,107.7,70.82,105.95,69.38,105.4Z" />
<g id="_Grupo_10" data-name="<Grupo>">
<g id="_Grupo_11" data-name="<Grupo>">
<path class="cls-5" d="M86.24,80.34c0.29,1.45,2.27,3.22,5.16,2.93s4.87-1.71,4.8-2.69S94.25,77.57,91,78,86.75,79.1,86.24,80.34Z" />
<circle class="cls-13" cx="91.17" cy="80.32" r="2.38" />
<circle class="cls-14" cx="91.17" cy="80.32" r="1.18" />
<path class="cls-14" d="M86.24,80.34c0.63-1.35,3.41-1.83,5.24-1.64s3.92,0.6,4.71,1.88c-0.19-1.68-1.39-3.41-5-3.27S86.15,79.19,86.24,80.34Z" />
<circle class="cls-5" cx="92.73" cy="79.91" r="0.87" />
<path class="cls-15" d="M84.94,74.73c0.19,0.62,1.19,1.19,3.28.36a11,11,0,0,1,3.88-1.15c2,0,4,.78,4.49.72,0.94-.11,1.5-0.29,1.59-0.9A1.61,1.61,0,0,0,96.87,72a17.12,17.12,0,0,0-5.06-.91c-2,0-6.26,1.28-6.58,1.93A2,2,0,0,0,84.94,74.73Z" />
</g>
<g id="_Grupo_12" data-name="<Grupo>">
<path class="cls-5" d="M73.58,80.34c-0.29,1.45-2.27,3.22-5.16,2.93s-4.87-1.71-4.8-2.69,1.95-3,5.23-2.54S73.07,79.1,73.58,80.34Z" />
<circle class="cls-13" cx="68.65" cy="80.32" r="2.38" />
<circle class="cls-14" cx="68.65" cy="80.32" r="1.18" />
<path class="cls-14" d="M73.58,80.34C73,79,70.16,78.51,68.33,78.7s-3.92.6-4.71,1.88c0.19-1.68,1.39-3.41,5-3.27S73.67,79.19,73.58,80.34Z" />
<circle class="cls-5" cx="67.08" cy="79.91" r="0.87" />
<path class="cls-15" d="M74.87,74.73c-0.19.62-1.19,1.19-3.28,0.36a11,11,0,0,0-3.88-1.15c-2,0-4,.78-4.49.72-0.94-.11-1.5-0.29-1.59-0.9A1.61,1.61,0,0,1,62.95,72,17.12,17.12,0,0,1,68,71.07c2,0,6.26,1.28,6.58,1.93A2,2,0,0,1,74.87,74.73Z" />
</g>
</g>
</g>
<g id="face5">
<g id="_Grupo_13" data-name="<Grupo>">
<g id="_Grupo_14" data-name="<Grupo>">
<path class="cls-15" d="M84.94,72.18c0.19,0.62,1.19,1.19,3.28.36a11,11,0,0,1,3.88-1.15c2,0,4,.78,4.49.72,0.94-.11,1.5-0.29,1.59-0.9a1.61,1.61,0,0,0-1.31-1.78,17.12,17.12,0,0,0-5.06-.91c-2,0-6.26,1.28-6.58,1.93A2,2,0,0,0,84.94,72.18Z" />
<path class="cls-5" d="M86.24,80.39c0.29,1.45,2.27,3.32,5.16,3s4.87-1.8,4.8-2.79-1.95-3-5.23-2.54S86.74,79.15,86.24,80.39Z" />
<circle class="cls-13" cx="91.17" cy="80.69" r="1.95" />
<circle class="cls-14" cx="91.17" cy="80.69" r="0.97" />
<path class="cls-14" d="M86.24,80.39c0.63-1.35,3.41-1.83,5.24-1.64s3.92,0.6,4.71,1.88c-0.19-1.68-1.39-3.41-5-3.27S86.14,79.23,86.24,80.39Z" />
<circle class="cls-5" cx="92.45" cy="80.35" r="0.71" />
</g>
<g id="_Grupo_15" data-name="<Grupo>">
<path class="cls-15" d="M74.87,72.71c-0.19.62-1.19,1.19-3.28,0.36a11,11,0,0,0-3.88-1.15c-2,0-4,.78-4.49.72-0.94-.11-1.5-0.29-1.59-0.9A1.61,1.61,0,0,1,62.95,70,17.12,17.12,0,0,1,68,69c2,0,6.26,1.28,6.58,1.93A2,2,0,0,1,74.87,72.71Z" />
<path class="cls-5" d="M73.6,80.28c-0.29,1.45-2.27,3.32-5.16,3s-4.87-1.8-4.8-2.79,1.95-3,5.23-2.54S73.1,79,73.6,80.28Z" />
<circle class="cls-13" cx="68.67" cy="80.58" r="1.95" />
<circle class="cls-14" cx="68.67" cy="80.58" r="0.97" />
<path class="cls-14" d="M73.6,80.28c-0.63-1.35-3.41-1.83-5.24-1.64s-3.92.6-4.71,1.88c0.19-1.68,1.39-3.41,5-3.27S73.7,79.13,73.6,80.28Z" />
<circle class="cls-5" cx="67.39" cy="80.25" r="0.71" />
</g>
</g>
<g id="_Grupo_16" data-name="<Grupo>">
<path class="cls-17" d="M81.17,108.62a10.8,10.8,0,0,1,6.69,2c3.9-3.16,4.88-8.16,3.77-8.57a6.27,6.27,0,0,1-1.09.38,3.86,3.86,0,0,1-1,2.26c-2,1.44-15.2,1.64-16.93,1.64-1.4,0-2.14-1-2.7-2.11a4.43,4.43,0,0,1-1.29-.15c-0.34,1.88,1.31,5.09,4.55,7.16C74.82,109.68,77.69,108.62,81.17,108.62Z" />
<path class="cls-5" d="M72.65,106.36c1.73,0,15-.19,16.93-1.64a3.86,3.86,0,0,0,1-2.26c-4.36,1.19-16.55,1.93-20.61,1.79C70.51,105.38,71.25,106.36,72.65,106.36Z" />
<path class="cls-18" d="M81.93,113.14a11.47,11.47,0,0,0,5.94-2.49,10.8,10.8,0,0,0-6.69-2c-3.49,0-6.36,1.06-8,2.64A13,13,0,0,0,81.93,113.14Z" />
</g>
</g>
</g>
</svg>
</div>
<div class="botonera">
<button class="paso" data-paso="1">1</button>
<button class="paso" data-paso="2">2</button>
<button class="paso" data-paso="3">3</button>
<button class="paso" data-paso="4">4</button>
<button class="paso" data-paso="5">5</button>
</div>
</div>
</div>
</body>
colores = #B10909 #DD790A #1C90D8 #38AF48 #DDBA0A
negro = black
#fondo
display none
.contenedor
width 100vw
height 100vh
display flex
justify-content center
align-items center
background-color lightgray
.grupo
display flex
justify-content center
align-items center
flex-direction row
flex-wrap wrap
#progress-element
height 160px
width 160px
background-color gray
border-radius 50%
transition all 2s ease-out
box-shadow 0 2px 2px rgba(negro,.6)
position relative
.indicador
stroke-dasharray 300
stroke-dashoffset 298
transition stroke-dashoffset 1s ease-out
#cara
opacity 0
transition all 0.3s ease-out
[id^="face"]
opacity 0
transition all 0.3s ease-out
for elem in 1..5
micolor = colores[elem - 1]
.paso{elem}
background-color micolor !important
#cara
opacity 1
#face{elem}
opacity 1
.indicador
stroke-dashoffset 300 - (60*elem)
.botonera
margin-top 1em
// outline 1px red dashed
.paso
width 4em
height 4em
line-height 4em
background-color gray
color white
border none
text-align center
border-radius 50%
box-shadow 0 2px 2px rgba(negro,.6)
for item in 1..5
&:nth-child({item})
micolor = colores[item - 1]
background-color micolor
var pasoBtn = $('.paso'),
progressElement = $('#progress-element');
pasoBtn.on('click',function(){
var paso = $(this).data('paso');
var clase = String('paso' + paso);
progressElement.removeClass();
progressElement.addClass(clase);
})
progressElement.on('click', function(){
progressElement.removeClass();
})
External CSS
This Pen doesn't use any external CSS resources.