JSFiddle - React, Tailwind, and code Playground

by Pav Sidhu

HTML

<div class="icon">
  <div class="iconBorder">
    <div class="iconContent"></div>
  </div>
</div>

CSS

body {
  margin: 150px;
  background-color: darkgrey;
}

.iconBorder {
  border-radius: 50%;
  width: 250px;
  height: 250px;
  padding: 20px 0 0 20px;
}

.iconContent {
  background-color: red;
  border-radius: 50%;
  width: 230px;
  height: 230px;
}

JavaScript

steps = 1
loops = 100 / steps
increment = 360 / loops
half = loops / 2

i = 35 // This is a percentage

if (i < half) {
  nextdeg = 90 + (increment * i)
  $('.icon .iconBorder').css('background-image', 'linear-gradient(90deg, darkgrey 50%, transparent 50%, transparent), linear-gradient(' + nextdeg + 'deg, white 50%, darkgrey 50%, darkgrey)')
} else {
  nextdeg = -90 + (increment * (i - half))
  $('.icon .iconBorder').css('background-image', 'linear-gradient(' + nextdeg + 'deg, white 50%, transparent 50%, transparent), linear-gradient(270deg, white 50%, darkgrey 50%, darkgrey)')
}