Lingkaran Kemajuan CSS [ditutup]

112

Saya telah mencari situs web ini untuk menemukan bilah kemajuan, tetapi yang dapat saya temukan menunjukkan lingkaran animasi yang mencapai 100% penuh.

Saya ingin berhenti pada persentase tertentu seperti pada gambar di bawah. Apakah ada cara agar saya dapat melakukannya hanya dengan menggunakan CSS?

Bilah kemajuan melingkar

html css progress-bar progress css-shapes Kata Adam GunShy
sumber
Saya tidak mencari skrip, saya mencari informasi CSS3 apa pun tentang ini.
Adam GunShy Said
8
Jangankan kata-kata, pertanyaan "Bagaimana melakukan Css Progress Circle?" masih berlaku. Saya pikir ini harus dibuka kembali dengan kata-kata baru, hasil ini pertama dalam pencarian dan berisi jawaban yang sudah ketinggalan zaman.
Ciantic
dari situs web mana tangkapan layar itu?
MoralCode
10
Ini adalah hasil nomor satu di google untuk 'indikator kemajuan melingkar css'. Sayangnya pertanyaan itu ditutup.
Gopherkhan
Jika Anda menggunakan LESS, Anda mungkin tertarik dengan cssscript.com/pure-css-circular-percentage-bar
jchook

Jawaban:

119

Saya membuat tutorial tentang bagaimana melakukan hal itu dengan CSS3 dan perpustakaan LESS JavaScript. Anda dapat menemukan posting blog di sini: https://medium.com/secoya-tech/a917b80c43f9

Berikut adalah jsFiddle dari hasil akhir. Persentase ditentukan melalui data-progressatribut. Perubahan dianimasikan menggunakan transisi CSS.

gif indikator kemajuan radial

andsens
sumber
3
Saya tidak tahu Anda bisa melakukan ini dengan css. Bagus.
Hobbes
4
Performa luar biasa menghantam .. membuatnya tidak dapat digunakan untuk aplikasi saya = [
Hobbes
2
Barang bagus. Masalah kecil di Firefox (menggunakan edisi pengembang 41.0a2) membuat tepi tajam terlihat selama transformasi. Mudah dilihat jika Anda menyetel kemajuan ke 90 dan waktu transisi ke 10 detik. Untuk memperbaiki tambahkan saja outline: 1px solid transparent;ke .mask, .fill, .shadowgrup.
luopio
5
@Hobbes, kamu tidak bisa, posternya bohong. Jawaban ini menggunakan banyak Javascript melalui perpustakaan yang disebut LESS.
Dapatkan Gratis
6
Saya telah membuat versi Sass, kalau-kalau ada yang ingin mencobanya: gist.github.com/digitalbreed/84a19db69244b22519e03550ba010a25
digitalbreed
78

Saya membuat biola hanya dengan menggunakan 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>
Luaskan cuplikan

Periksa juga biola ini di sini (khusus 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>
Luaskan cuplikan

Atau bilah kemajuan bulat yang indah ini dengan HTML5, CSS3, dan JavaScript.

Panos Kal.
sumber
1
fromanegg.com/post/41302147556/100-pure-css-radial-progress-bar
Roko C. Buljan
@panos saya mencoba solusi pertama Anda. Saya perlu .circle border menjadi 6px, bukan 10px. Saya mencapai hal yang sama tetapi mencapai 50%. Ini memberikan sentakan dan sekali lagi memulai animasi. Coba saja
Santhosh Kumar
@ Santosh-kumar, Anda juga perlu mengubah nilai lain
Panos Kal.
@panos Bagaimana cara mengubah kemajuan solusi pertama? bisakah itu dilakukan dengan elemen data? Saya agak baru dalam animasi
anthonytherockjohnson
1
Menurut MDN clip sekarang sudah usang.
jstaab
36

Bagaimana dengan itu?

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

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

Kode dasar diambil dari Simple PIE Chart http://rendro.github.io/easy-pie-chart/

OzzyCzech
sumber
Ini adalah solusi terbaik untuk saya (tidak ada jquery juga!).
Andy B
2
Untuk saya juga. Berikut adalah cara menganimasikannya: 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
Bagaimana cara mengatur warna gradien ke lingkaran?
yaniv14
jsFiddle tidak menampilkan bilah di Chrome.
Esamo
10

Solusi berbasis css murni lainnya yang didasarkan pada dua elemen bulat terpotong yang saya putar untuk mendapatkan sudut yang tepat:

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

Itulah css dasar yang memungkinkannya:

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

dan js memutarnya sesuai kebutuhan.

cukup mudah dimengerti ..

Semoga membantu, Maayan

Maayan
sumber
1
Di dalam jQuery, tidak perlu mengatur semua bagian -vendor-prefixesdalam .css()♪ Hanya gunakantransform: 'rotate(' + degree + 'deg)'
Roko C. Buljan
1
Ini lebih mudah dan bersih, saya bekerja mulai dari contoh @Maayan dan mendapatkan ini: jsfiddle.net/g8z64Ler
lukart