medium bootstrap bar html5 css3 progress-bar progress css-shapes

html5 - bar - progress circle bootstrap



CSS Progress Circle (4)

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

Me gustaría que se detenga en ciertos porcentajes como en la captura de pantalla a continuación. ¿Hay alguna manera de hacerlo usando solo CSS?


¿Qué hay de 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 fue tomado de Simple PIE Chart http://rendro.github.io/easy-pie-chart/


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

Aquí hay un jsFiddle del resultado final. El porcentaje se establece mediante el atributo de data-progress . Los cambios están animados usando transiciones de CSS.


Creé un violín usando solo css .

HTML

<div class="wrapper" data-anim="base wrapper"> <div class="circle" data-anim="base left"></div> <div class="circle" data-anim="base right"></div> </div>

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 */ }

También verifique este violín aquí (sólo CSS)

HTML

<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>

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; }

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


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

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

Esa es la CSS básica 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 rota según sea necesario.

bastante fácil de entender ...

Espero que ayude, Maayan