1

I need to build a very simple doughnut chart ( 2 values, no animations, pure css) didn't found anything simple in google ( everything is using animation or many values)

Please help me :)

user3764353
  • 11
  • 1
  • 3
  • http://stackoverflow.com/a/20529884/2260614 and http://stackoverflow.com/a/8468946/2260614 – Bhavik Jun 22 '14 at 08:54
  • I need the hole to be transparent for the background and its not possible to to this with the examples.. – user3764353 Jun 22 '14 at 09:08
  • http://jsfiddle.net/8nuut/ something like this? You will have to play with rotation and top position to get desired effect... p.s. Here are some helpful ideas to get different shapes: http://www.paulund.co.uk/how-to-create-different-shapes-in-css – sinisake Jun 22 '14 at 09:16
  • http://codepen.io/clintioo/pen/ouxGp – vsync Jun 22 '14 at 10:58

2 Answers2

1

Demo
CSS 

.value {
    height:100%;
    width:100%;
    border-radius:100%;
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 5px rgba(0, 0, 0, 0.1) inset;
    position:absolute;
    background: -moz-linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3498db), color-stop(50%, #3498db), color-stop(50%, #FFFFFF), color-stop(100%, #FFFFFF));/* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);/* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);/* Opera11.10+ */
    background: -ms-linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);/* IE10+ */
    background: linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);/* W3C */
}

The trick which makes it work is also it's limitation.... Using linear-gradient from 0% to 50% it shows #3498db color and then from 50% to 100% it shows #FFFFFF color... To set this dynamically with a perfect look will be a lot difficult...

Hope it helps..!!

Bhavik
  • 4,836
  • 3
  • 30
  • 45
-1

I'm not sure if you can make one using pure CSS, but check out highcharts. Theirs is pretty simple, and you can do it with only two values (don't be intimidated by the example).

Bluefire
  • 13,519
  • 24
  • 74
  • 118