Drawing a Circle With Css
Drawing Rings With Css
I mentioned in my last post that the master awarding I work on has just undergone a redesign. One part of this was adding more visual goodness to the dashboard which greets users on login and serves as their information overview hub. A new component here displayed a progress bike to keep the user up to appointment with their target for the month. Here'southward the finished article...
So how to render this... let'southward pretend you didn't read the title of this post, and I'll tell y'all the start thing I considered was to apply SVG. But I don't really know annihilation most SVG... so as well every bit having to start from scratch from an implementation point of view I've as well no idea about the trade-offs of deploying it. So I thought I'd endeavor using CSS.
Design Plan
The basic plan I had was to draw two rings, the green one placed infront of the gray one. I hoped that I could use percentage sizes inside a container to allow the whole thing to flex and move with the page.
The Like shooting fish in a barrel Way...
The easiest part is obviously the backing grayness ring so I won't spend too much time on that. Essentially it'southward 2 divs, styled to be circles, the back one grayness and the front ane white to overlay the center office and requite the illusion of the grey being a ring. Like and so...
<div class= "progress" > <div class= "back" ></div> <div class= "back-middle" ></div> </div> .progress .dorsum { position : accented ; background-color : #e7eeeb ; width : calc ( 100% - 10px ); peak : calc ( 100% - 10px ); summit : 5px ; left : 5px ; border - radius : fifty% ; } .progress .back-middle { position : absolute ; background-color : #fff ; width : calc ( 100% - 40px ); superlative : calc ( 100% - 40px ); top : 20px ; left : 20px ; border - radius : l% ; } Equally you tin can run into from the lawmaking above I'1000 not worrying too much nearly backwards compatibility here, I'm lucky enough to exist in the position where we can expect a modern browser. It'southward adequately self explanatory so I won't go through it. The only matter to notation is the offsets and calcs which brand the circle slightly inset (which will become important when drawing the green portion as it's a wider ring that overlaps on both sides).
The Hard Way!
That'due south the easy office done, but the green ring is tricker as information technology's fractional. The program for this part is to describe it in four segments by skewing a div effectually the origin of the circle, and then cutting out the center with another overlayed circumvolve. Maybe a disgram will explicate...
Going through the $.25...
- The containing circle will hibernate the overflow
- The white circle will cut the centre out
- The light-green coloured skewed div will provide the advent of the ring
Here's the code for the first segment, 0-25%.
<div form= "seg seg-1" fashion= "transform: skew(0deg, 45deg)" ></div> .seg { position : absolute ; groundwork-color : #4ecaab ; width : calc ( 100% / 2 ); height : calc ( 100% / 2 ); } .seg-1 { top : 0 ; left : 0 ; transform - origin : lesser correct ; } The transform uses a skew to achieve the rotation effect, the important function to note here for the start segment is transform-origin which specifies the corner of the div that the skew volition be based on. The plan for the next three segments volition be to movement the transform-origin for each to be the centre of the circle...
.seg-2 { tiptop : calc ( 100% / 2 ); left : 0 ; transform - origin : top right ; } .seg-3 { meridian : calc ( 100% / 2 ); left : calc ( 100% / 2 ); transform - origin : top left ; } .seg-four { top : 0 ; left : calc ( 100% / ii ); transform - origin : bottom left ; } As I said I use a fiddling templating server-side to decide which segments to draw and what bending to draw, here's the starting time segment...
{% if percentage <= 25 %} {% set bending = ( pct / 25 ) * 90 %} {% set skew = 90 - bending %} <div class="seg seg-one" way="transform: skew(0deg, {{ skew }} deg);"></div> {% elseif etc ... %} The Terminal Result
The completed matter looks great, and resizes really nicely with the page. Plain if you don't have a mod browser then you're going to see an absolute mess, simply that's ok for my case.
Every bit I mentioned at the start of the article I didn't choose to utilise SVG because of my complete lack of noesis of it - only I'm actually pleased with how it came out with CSS. If I've missed some tricks and there are actually much simpler means to do this and then I'd love to hear well-nigh it so leave a comment.
Source: http://blog.pu-gh.com/2014/09/30/drawing-rings-with-css/