CSS Progress Circle [fermé]

112

J'ai cherché sur ce site Web pour trouver des barres de progression, mais celles que j'ai pu trouver montrent des cercles animés qui vont à 100%.

Je voudrais que cela s'arrête à certains pourcentages comme dans la capture d'écran ci-dessous. Est-ce que je peux faire cela en utilisant uniquement CSS?

html css progress-bar progress css-shapes Adam GunShy a dit
la source

Je ne cherche pas de script, je recherche des informations CSS3 à ce sujet.

Adam GunShy a déclaré le

8

Peu importe le libellé, la question "Comment faire Css Progress Circle?" est toujours valide. Je pense que cela devrait être rouvert avec un nouveau libellé, ce résultat est le premier dans les recherches et contient des réponses obsolètes.

Ciantic

De quel site Web provient cette capture d'écran?

MoralCode

10

C'est le résultat numéro un sur Google pour «indicateur de progression circulaire css». Dommage que la question soit close.

Gopherkhan

Si vous utilisez LESS, vous pourriez être intéressé par cssscript.com/pure-css-circular-percentage-bar

jchook

119

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

Voici un jsFiddle du résultat final. Le pourcentage est défini via l' data-progressattribut. Les modifications sont animées à l'aide de transitions CSS.

gif de l'indicateur de progression radiale

andsens
la source

3

Je ne savais pas que vous pouviez faire cela avec css. Agréable.

Hobbes

4

Cependant, les performances ont été importantes ... le rendant inutilisable pour mon application = [

Hobbes

2

Excellent truc. Un problème mineur dans Firefox (en utilisant l'édition développeur 41.0a2) crée des arêtes vives visibles pendant la transformation. Facile à voir si vous définissez la progression à 90 et le temps de transition à 10 s. Pour corriger, ajoutez simplement outline: 1px solid transparent;au .mask, .fill, .shadowgroupe.

luopio le

5

@Hobbes, vous ne pouvez pas, l'affiche ment. Cette réponse utilise de grandes quantités de Javascript via une bibliothèque appelée LESS.

GetFree

6

J'ai créé une version Sass, juste au cas où quelqu'un voudrait l'essayer: gist.github.com/digitalbreed/84a19db69244b22519e03550ba010a25

digitalbreed

78

J'ai créé un violon en utilisant uniquement 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>

Développer l'extrait

Vérifiez également ce violon ici (CSS uniquement)

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

Développer l'extrait

Ou cette belle barre de progression ronde avec HTML5, CSS3 et JavaScript.

Panos Kal.
la source

1

fromanegg.com/post/41302147556/100-pure-css-radial-progress-bar

Roko C. Buljan

@panos j'ai essayé votre première solution. J'ai besoin d'une bordure .circle de 6 pixels au lieu de 10 pixels. J'ai réalisé la même chose mais en atteignant 50%. Cela donne une secousse et recommence l'animation. Essayez simplement

Santhosh Kumar

@ Santosh-kumar, vous devez également changer d'autres valeurs

Panos Kal.

@panos Comment changer la progression des premières solutions? cela pourrait-il être fait avec un élément de données? Je suis plutôt nouveau dans l'animation

anthonytherockjohnson

1

Selon MDN, il clip est désormais obsolète.

jstaab

36

Que dire de cela?

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/

Le code de base a été tiré de Simple PIE Chart http://rendro.github.io/easy-pie-chart/

OzzyCzech
la source

C'était la meilleure solution pour moi (pas de jquery aussi!).

Andy B

2

Pour moi aussi. Voici comment l'animer: 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

Comment définir des couleurs dégradées sur le cercle?

yaniv14

jsFiddle n'affiche pas de barre sur Chrome.

Esamo

10

Une autre solution purement basée sur le CSS basée sur deux éléments arrondis découpés que je fais pivoter pour obtenir le bon angle:

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

C'est le CSS de base qui le 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 le js le fait tourner selon les besoins.

assez facile à comprendre ..

J'espère que ça aide, Maayan

Maayan
la source

1

À l'intérieur de jQuery, il n'est pas nécessaire de définir tout l' -vendor-prefixesintérieur .css()♪ Utiliser uniquementtransform: 'rotate(' + degree + 'deg)'

Roko C. Buljan

1

C'est le plus facile et le nettoyage, j'ai travaillé à partir de l'exemple @Maayan et j'ai obtenu ceci: jsfiddle.net/g8z64Ler

lukart

CSS Progress Circle [fermé]

Réponses: