CSS Progress Circle

Question

我已經搜索了這個網站找到進度條，但是我已經能夠找到的那些顯示出完整的100％的動畫圈。

我希望它停止在某些百分比，如下面的屏幕截圖。有沒有什麼辦法可以做到這一點只使用CSS？

Answer 1

我創建使用only 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 */ 
} 

還要檢查這個fiddle here（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; 
} 

或者這美麗round progress bar與HTML5，CSS3和JavaScript。

Answer 2

我創建了一個關於如何使用CSS3和LESS JavaScript庫完成的教程。 你可以在這裏找到這篇博文：https://medium.com/secoya-tech/a917b80c43f9

這是一個jsFiddle的最終結果。百分比通過data-progress屬性設置。使用CSS轉換動畫更改。

Answer 3

是基於兩個裁剪圓的元素，我旋轉到合適的角度另一純CSS基礎的解決方案：

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

這是基本的CSS，這使得它：

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

並且js根據需要旋轉它。

很容易理解..

希望它能幫助， Maayan

Answer 4

怎麼樣？

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

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

Basic代碼是從簡單的餅圖採取