Koło postępu CSS [zamknięte]

112

Przeszukałem tę witrynę, aby znaleźć paski postępu, ale te, które udało mi się znaleźć, pokazują animowane kręgi, które sięgają w 100%.

Chciałbym, aby zatrzymywał się w określonych procentach, jak na zrzucie ekranu poniżej. Czy mogę to zrobić używając tylko CSS?

Okrągłe paski postępu

Adam GunShy powiedział
źródło
Nie szukam skryptu, szukam informacji CSS3 na ten temat.
Adam GunShy powiedział
8
Mniejsza o sformułowanie, pytanie „Jak zrobić koło postępu CSS?” jest ciągle ważny. Myślę, że to powinno zostać ponownie otwarte z nowym brzmieniem, ten wynik jest pierwszy w wyszukiwaniach i zawiera nieaktualne odpowiedzi.
Ciantic,
z jakiej strony jest ten zrzut ekranu?
MoralCode
10
Jest to wynik numer jeden w Google pod względem „cyklicznego wskaźnika postępu CSS”. Szkoda, że ​​pytanie jest zamknięte.
Gopherkhan
Jeśli używasz LESS, możesz być zainteresowany cssscript.com/pure-css-circular-percentage-bar
jchook

Odpowiedzi:

119

Stworzyłem poradnik, jak to zrobić z CSS3 i biblioteką LESS JavaScript. Możesz znaleźć post na blogu tutaj: https://medium.com/secoya-tech/a917b80c43f9

Oto jsFiddle końcowego wyniku. Procent jest ustawiany za pomocą data-progressatrybutu. Zmiany są animowane przy użyciu przejść CSS.

gif radialnego wskaźnika postępu

andsens
źródło
3
Nie miałem pojęcia, że ​​możesz to zrobić za pomocą CSS. Miły.
Hobbes
4
Uderzyła jednak duża wydajność ... co sprawia, że ​​jest bezużyteczna dla mojej aplikacji = [
Hobbes
2
Doskonała rzecz. Drobny problem w Firefoksie (używającym wersji deweloperskiej 41.0a2) tworzy widoczne ostre krawędzie podczas przekształcania. Łatwo zobaczyć, jeśli ustawisz postęp na 90, a czas przejścia na 10 sekund. Aby naprawić, po prostu dodaj outline: 1px solid transparent;do .mask, .fill, .shadowgrupy.
luopio,
5
@Hobbes, nie możesz, plakat kłamie. Ta odpowiedź wykorzystuje duże ilości JavaScript za pośrednictwem biblioteki o nazwie LESS.
GetFree
6
Stworzyłem wersję Sassa, na wszelki wypadek, gdyby ktoś chciał spróbować: gist.github.com/digitalbreed/84a19db69244b22519e03550ba010a25
digitalbreed
78

Stworzyłem skrzypce używając tylko 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>

Sprawdź także to skrzypce tutaj (tylko 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;
}
<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>

Lub ten piękny okrągły pasek postępu z HTML5, CSS3 i JavaScript.

Panos Kal.
źródło
@panos Próbowałem ur pierwszego rozwiązania. Potrzebuję obramowania .circle o rozmiarze 6 pikseli zamiast 10 pikseli. Osiągnąłem to samo, ale osiągnąłem 50%. Daje szarpnięcie i ponownie rozpoczyna animację. Po prostu wypróbuj
Santhosh Kumar
@ Santosh-kumar, musisz też zmienić inne wartości
Panos Kal.
@panos Jak zmienić postęp pierwszych rozwiązań? czy można to zrobić z elementem danych? Jestem raczej nowy w animacji
anthonytherockjohnson
1
Według MDN clip jest teraz przestarzały.
jstaab
36

Co z tym?

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

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

Podstawowy kod pochodzi z Simple PIE Chart http://rendro.github.io/easy-pie-chart/

OzzyCzech
źródło
To było dla mnie najlepsze rozwiązanie (bez jQuery!).
Andy B
2
Dla mnie też. Oto jak to animować: 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
Jak ustawić kolory gradientu w okręgu?
yaniv14
jsFiddle nie wyświetla paska w przeglądarce Chrome.
Esamo,
10

Kolejne rozwiązanie oparte na czystym CSS, które opiera się na dwóch przyciętych, zaokrąglonych elementach, które obracam, aby uzyskać odpowiedni kąt:

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

To podstawowy css, który to umożliwia:

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

a js obraca go zgodnie z wymaganiami.

dość łatwe do zrozumienia ...

Mam nadzieję, że to pomoże, Maayan

Maayan
źródło
1
Wewnątrz jQuery nie ma potrzeby ustawiania całego -vendor-prefixeswnętrza .css()♪ Używaj tylkotransform: 'rotate(' + degree + 'deg)'
Roko C. Buljan
1
To jest łatwiejsze i czyści, pracowałem zaczynając od przykładu @Maayan i otrzymałem to: jsfiddle.net/g8z64Ler
lukart