JsIsAwesome JsIsAwesome - 6 months ago 33
CSS Question

CSS gradients one sharp color

I need to fill a circle that will behave like a progress bar. But with this approach the edge is not sharp. How can i do this with dynamic width and not 50% 50%?



.completion-indicator {
width: 50px;
height: 50px;
background: linear-gradient(to right, green 30%, transparent 70%);
border-radius: 50%;
border: 1px solid lightgrey;
display: flex;
justify-content: center;
align-items: center;
}
.completion-indicator::before {
content: '\2714';
color: grey;
}

<div class="completion-indicator"></div>




Answer

Simply make the percentages the same.

From CSS Mine:

The above-mentioned color patterns make use of the so-called sharp transition, which is not really a transition because there is a sharp edge between colors:

background: linear-gradient(to bottom, transparent, lightgreen 33%, darkgreen 33%)

See cdpn.io/e/licEd

For a 30% indicator:

.completion-indicator {
  width: 50px;
  height: 50px;
  background: linear-gradient(to right, green 30%, transparent 30%);
  border-radius: 50%;
  border: 1px solid lightgrey;
  display: flex;
  justify-content: center;
  align-items: center;
}
.completion-indicator::before {
  content: '\2714';
  color: grey;
}
<div class="completion-indicator"></div>

You can then adjust the percentages as needed.