Filling circle sector in CSS

Question

Given this:

var hoursStart = (7 + 0 / 60 + 20 / 60 / 60) * 360 / 12;
$(".start").css("transform", "rotate(" + hoursStart + "deg)");
var hoursEnd = (10 + 0 / 60 + 20 / 60 / 60) * 360 / 12;
$(".end").css("transform", "rotate(" + hoursEnd + "deg)");

.clock {
  border: 5px solid #FFF;
  background-color: #e84c3d;
  border-radius: 100%;
  display: block;
  height: 250px;
  width: 250px;
  position: relative;
}

.clock .start {
  background: #fff;
  height: 0;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 0;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  margin: -105px -2px 0;
  padding: 105px 2px 0;
}

.clock .end {
  background: #fff;
  height: 0;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 0;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  margin: -105px -2px 0;
  padding: 105px 2px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="clock">
  <div class="start"></div>
  <div class="end"></div>
</div>

Which creates this circle:

What I want is like this:

I have tried this code, but it's not like what I want:

$(".clock")
    .css("background-color", "blue")
    .css("background-image", 
    "linear-gradient(" + hoursStart +"deg, #e74c3c 50%, transparent 50%),linear-gradient(" + hoursEnd +"deg, #e74c3c 50%, transparent 50%)");

// These fields come from server
var start_hour = 8;
var end_hour = 10;

var hoursStart = (start_hour + 0 / 60 + 20 / 60 / 60) * 360 / 12;
$(".start").css("transform", "rotate(" + hoursStart + "deg)");
var hoursEnd = (end_hour + 0 / 60 + 20 / 60 / 60) * 360 / 12;
$(".end").css("transform", "rotate(" + hoursEnd + "deg)");


var start = hoursStart - 60;
var end = hoursEnd + 60;

$(".clock")
  .css("background-color", "blue")
  .css("background-image",
    "linear-gradient(" + hoursStart + "deg, #e74c3c 50%, transparent 50%),linear-gradient(" + hoursEnd + "deg, #e74c3c 50%, transparent 50%)");

body {
  background-color: #e74c3c;
}

.container {
  margin: 40px auto 20px;
  width: 250px;
}

.clock {
  border: 5px solid #FFF;
  border-radius: 100%;
  display: block;
  height: 250px;
  width: 250px;
  position: relative;
}

.clock .start {
  background: #fff;
  height: 0;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 0;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  margin: -105px -2px 0;
  padding: 105px 2px 0;
}

.clock .end {
  background: #fff;
  height: 0;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 0;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  margin: -105px -2px 0;
  padding: 105px 2px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="clock">
    <div class="start"></div>
    <div class="end"></div>
  </div>
</div>

Fiddle.

Have a look at the second snippet here - http://stackoverflow.com/questions/31198304/count-down-timer-with-circular-progress-bar/31199281#31199281. I think a reverse of that animation is what you're looking for. — Harry, Dec 08 '15 at 05:21

score 1 · Answer 1 · edited Jul 09 '17 at 10:22

.pieContainer {
  height: 100px;
}

.pieBackground {
  background-color: grey;
  position: absolute;
  width: 100px;
  height: 100px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  -moz-box-shadow: -1px 1px 3px #000;
  -webkit-box-shadow: -1px 1px 3px #000;
  -o-box-shadow: -1px 1px 3px #000;
  box-shadow: -1px 1px 3px #000;
}

.pie {
  position: absolute;
  width: 100px;
  height: 100px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  clip: rect(0px, 50px, 100px, 0px);
}

.hold {
  position: absolute;
  width: 100px;
  height: 100px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  clip: rect(0px, 100px, 100px, 50px);
}

#pieSlice1 .pie {
  background-color: #1b458b;
  -webkit-transform: rotate(50deg);
  -moz-transform: rotate(50deg);
  -o-transform: rotate(50deg);
  transform: rotate(50deg);
}

<div class="pieContainer">
  <div class="pieBackground"></div>
  <div id="pieSlice1" class="hold">
    <div class="pie"></div>
  </div>
</div>

Fiddle

Oops. I actually thought I did. My mistake. Thank you for adding it as the source explains how this works somewhat. — Korgrue, Dec 07 '15 at 19:00
It's different with my HTML structure. I can't change the HTML and CSS — Sirwan Afifi, Dec 07 '15 at 19:33

score 1 · Accepted Answer · edited Jul 10 '17 at 00:39

I think that what you want is achieved changing this part of the script

var start =  hoursStart + 90;
var end = hoursEnd - 90;


$(".clock")
    .css("background-color", "blue")
    .css("background-image", 
    "linear-gradient(" + end +"deg, #e74c3c 50%, transparent 50%),linear-gradient(" + start +"deg, #e74c3c 50%, transparent 50%)");

// These fields come from server
var start_hour = 7;
var end_hour = 10;

var hoursStart = (start_hour + 0 / 60 + 20 / 60 / 60) * 360 / 12;
$(".start").css("transform", "rotate(" + hoursStart + "deg)");
var hoursEnd = (end_hour + 0 / 60 + 20 / 60 / 60) * 360 / 12;
$(".end").css("transform", "rotate(" + hoursEnd + "deg)");


var start = hoursStart + 90;
var end = hoursEnd - 90;

$(".clock")
  .css("background-color", "blue")
  .css("background-image",
    "linear-gradient(" + end + "deg, #e74c3c 50%, transparent 50%),linear-gradient(" + start + "deg, #e74c3c 50%, transparent 50%)");

body {
  background-color: #e74c3c;
}

.container {
  margin: 40px auto 20px;
  width: 250px;
}

.clock {
  border: 5px solid #FFF;
  border-radius: 100%;
  display: block;
  height: 250px;
  width: 250px;
  position: relative;
}

.clock .start {
  background: #fff;
  height: 0;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 0;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  margin: -105px -2px 0;
  padding: 105px 2px 0;
}

.clock .end {
  background: #fff;
  height: 0;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 0;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  margin: -105px -2px 0;
  padding: 105px 2px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="clock">
    <div class="start"></div>
    <div class="end"></div>
  </div>
</div>

fiddle

Filling circle sector in CSS

2 Answers2