CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ben Carey
Ben Carey

Reputation: 16958

Creating a Custom Pie Style Circle

I am trying to cut a slice out of a circle but it is proving to be harder than I originally anticipated...

Preferably, I do not want to use Google Charts and any other equivalents as I need to have as much control on the style of this circle as possible (the end result is a loading ring). I will also need to be able to animate, either using jQuery or CSS, the size of the slice.

Please forgive me but I haven't got very far, this is all I have:

JSFiddle

The circles I am concerned about are #layer_2 and #layer_3. Here is the code for just this circle:

#layer_2 {
  border-radius: 50%;
  width: 212px;
  height: 212px;
  margin: 14px;
  background: #5c00d2;
  background: -moz-linear-gradient(45deg, #5c00d2 0%, #d586f4 100%);
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #5c00d2), color-stop(100%, #d586f4));
  background: -webkit-linear-gradient(45deg, #5c00d2 0%, #d586f4 100%);
  background: -o-linear-gradient(45deg, #5c00d2 0%, #d586f4 100%);
  background: -ms-linear-gradient(45deg, #5c00d2 0%, #d586f4 100%);
  background: linear-gradient(45deg, #5c00d2 0%, #d586f4 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#5c00d2', endColorstr='#d586f4', GradientType=1);
  -webkit-box-shadow: inset 0px 0px 5px 3px rgba(5, 71, 110, 0.5);
  -moz-box-shadow: inset 0px 0px 5px 3px rgba(5, 71, 110, 0.5);
  box-shadow: inset 0px 0px 5px 3px rgba(5, 71, 110, 0.5);
}
#layer_3 {
  border-radius: 50%;
  width: 212px;
  height: 212px;
  margin: 0;
  background: transparent;
  -webkit-box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
}
<div id="layer_2">
  <div id="layer_3"></div>
</div>

I would like the end result to look similar to this:

Loading Ring

Upvotes: 3

Views: 66

Answers (1)

Arun Kumar
Arun Kumar

Reputation: 1667

Try this

layer_2

background-image:
    linear-gradient(-90deg, transparent 50%, #5c00d2 50%),
    linear-gradient(200deg, #5c00d2 50%, transparent 50%);

DEMO

Upvotes: 1

Related Questions