CSS Cercle de Progression

J'ai cherché sur ce site web pour trouver les barres de progression, mais ceux que j'ai pu trouvé spectacle animé des cercles qui vont à 100%.

J'aimerais qu'il s'arrête à certaines pourcentages comme dans la capture d'écran ci-dessous. Est-il possible que je peux le faire en utilisant uniquement CSS?

Je ne suis pas à la recherche d'un script, je suis à la recherche de tout CSS3 informations à ce sujet.
Jamais l'esprit, la formulation, la question du "Comment faire en Css Cercle de Progression?" est toujours valable. Je pense que cela devrait être rouvert avec un nouveau libellé, ce résultat est d'abord dans les recherches et contient obsolète réponses.
ce site est que la capture d'écran?
C'est le numéro un résultat sur google pour "la circulaire de l'indicateur de progression css'. Dommage que la question est fermée.
Si vous êtes en utilisant MOINS vous pourriez être intéressé par cssscript.com/pure-css-circular-percentage-bar

InformationsquelleAutor Adam GunShy Said | 2013-01-08

109

J'ai créé un tutoriel sur la façon de faire exactement cela avec CSS3 et le JavaScript MOINS de la bibliothèque.
Vous pouvez trouver l'article sur le blog ici: https://medium.com/secoya-tech/a917b80c43f9

Ici est un jsFiddle du résultat final. Le pourcentage est fixé par le data-progress attribut. Les changements sont animés à l'aide de CSS transitions.
- Je n'avais aucune idée que vous pouvez le faire avec du css. Nice.
- De grandes performances mais.. le rendre inutilisable pour mon app =[
- Désolé de l'entendre. Je pense qu'il pourrait être la grande quantité d'éléments du DOM pour l'animation de texte, si vous tuez la partie, il devrait fonctionner plus en douceur (mais c'est moins amusant de cette façon, bien sûr...)
- Ha déjà fait, il a aidé. C'est drôle, j'ai essayé beaucoup de différents indicateurs de progrès et ils ont tous un fort impact négatif sur les performances. Le navigateur n'a pas de problème avec 400k de polygones et 200 mo de données de texture, mais un chargeur simple et il commence à ramper...bizarre. La vôtre a été en fait l'un des plus performants des solutions.
- J'aime vraiment votre circulaire de la barre de progression. Il a seulement un problème lorsque la chose est centré: si le pourcentage est supérieur à 50, il disparaît, voir ce jsFiddle. Pourriez-vous régler ce problème?
- Ici, vous allez: jsfiddle.net/jfu7mt7g Vous êtes text-align:center cascades à travers tous les autres éléments, vous devez réinitialiser qu'.
- D'excellentes choses. Un problème mineur dans Firefox (à l'aide de developer edition 41.0a2) crée visible bords tranchants au cours de la transformation. Facile de voir si vous définissez des progrès à 90 et le temps de transition de 10s. Pour réparer ajouter outline: 1px solid transparent; à .mask, .fill, .shadow groupe.
- excellent, merci!
- Une grande part. J'aime la façon dont .moins est utilisé pour faire de si facile à personnaliser. Ont affiché une légère amélioration comme un problème sur votre github github.com/andsens/blog-material/issues/2
- vous ne pouvez pas poster, c'est mentir. Cette réponse utilise de fortes quantités de Javascript par l'intermédiaire d'une bibliothèque appelée MOINS.
- J'ai créé une version Sass, juste au cas où quelqu'un veut l'essayer: gist.github.com/digitalbreed/84a19db69244b22519e03550ba010a25
- Le .inset élément peut être remplacé entièrement avec un seul pseudo-élément, ce qui le rend beaucoup plus simple balisage: .radial-progress:before { content: attr(data-progress) '%'; height: 90px; width: 90px; position: absolute; top: 50%; left: 50%; font-weight: 800; font-size: 22px; font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #97a71d; text-align: center; background: #fff; z-index: 2; border-radius: 100%; transform: translate(-50%, -50%); line-height: 90px; }
- holy crap, vous avez raison! Qui devrait améliorer considérablement les performances du! Auriez-vous l'esprit de bifurquer github.com/andsens/blog-material ou le jsfiddle lui-même pour une démo? J'aimerais voir ça 🙂
- Désolé, je n'ai pas été ici pendant un certain temps. Été super occupé au travail. J'ai fait une rapide fourche à JSFiddle: jsfiddle.net/3gkw7bmr
- Nice. Je me souviens maintenant pourquoi je ne le faisais pas bien, vous ne pouvez pas animer les chiffres :-/
- Ah, oui, je n'ai même pas remarqué cet aspect. Je suppose que vous pourriez obtenir un résultat similaire en faisant le décompte avec JavaScript, de manière progressive en augmentant la valeur de data-progress.
- Salut à tous! Je vous remercie beaucoup pour cela. J'ai remarqué, cependant, que lorsque la valeur de progression est de 85% ou plus, qu'il y a un drôle de décalage sur safari. Il semble y avoir un écart à gauche de la barre des 50% jusqu'à la dernière milli-seconde lorsque le navigateur le remplit. Savez-vous pourquoi il en est? Comment puis-je résoudre ce problème? Merci!
- Pour répondre à ma propre question, j'ai résolu ce bug (sur safari) par la mise border-radius de .masque à 0 (j'.e retrait de cette valeur) et en fournissant .remplir avec border-rayon de 50%.
InformationsquelleAutor andsens

J'ai créé un violon à l'aide de seulement CSS.

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

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>

Également vérifier ce violon ici (CSS)

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

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>

Ou ce belle tour de la barre de progression avec HTML5, CSS3 et JavaScript.

fromanegg.com/post/41302147556/100-pure-css-radial-progress-bar
j'ai essayé ur la première solution. J'ai besoin d' .cercle frontière 6px au lieu de 10px. J'ai obtenu le même, mais sur l'atteinte de 50%. Il donne un coup de reins et de nouveau à partir de l'animation. Juste essayer
vous avez besoin de modifier les autres valeurs trop
Comment puis-je changer la première des solutions de progrès? pourrait-il être fait avec un élément de données? Je suis assez nouveau à l'animation
Selon SOCIÉTÉ clip est maintenant obsolète.

InformationsquelleAutor Panos Kal.

Ce sujet?

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

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

Code de base a été prise à partir de la Simple camembert http://rendro.github.io/easy-pie-chart/

C'était la meilleure solution pour moi (pas de jquery trop!).
Pour moi aussi. Voici comment l'animer: drawCircle('#efefef', les options.largeur de raie, 100 / 100); var i = 0; var int = setInterval(function(){ i++; drawCircle('#555555', les options.largeur de raie, i / 100); span.textContent=i+"%"; if(i>=100) { clearInterval(int); } },100);
Comment définir un dégradé de couleurs dans le cercle?
jsFiddle ne pas afficher une barre de Chrome.

InformationsquelleAutor OzzyCzech

Un autre pur css solution est basée sur deux tondus éléments arrondis que je tourne pour se rendre à l'angle droit:

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

C'est le css de base qui lui permet:

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

et la js tourne comme requis.

assez facile à comprendre..

Espérons que cela aide,
Maayan

À l'intérieur de jQuery, il n'y a pas besoin de mettre tous les -vendor-prefixes à l'intérieur de .css() ♪ Utiliser uniquement transform: 'rotate(' + degree + 'deg)'
C'est le plus facile et cleanes, j'ai travaillé en place à partir de @Maayan exemple et obtenu ceci: jsfiddle.net/g8z64Ler

InformationsquelleAutor Maayan

Vous devez vous connecter pour publier un commentaire.