JSFiddle - React, Tailwind, and code Playground

HTML

<div id="d1"></div>
  <div id="d2"></div>
  <div id="d3"></div>
  <input type="number" min="-90" max="270">

CSS

div {
  margin: auto;
  margin-bottom: 20px;
  height: 100px;
  width: 100px;

  border: 2px solid red;
  border-radius: 50%;
  box-sizing: border-box;

  background-color: white;
}

JavaScript

'use strict';

const d1 = document.querySelector("#d1");
const d2 = document.querySelector("#d2");
const d3 = document.querySelector("#d3");

const inp = document.querySelector("input");

inp.addEventListener('input', e => foo(e.target.value));


function foo(value) {
  const s0 = "linear-gradient(90deg, white 50%, transparent 50%)";
  const s1 = "linear-gradient(90deg, transparent 50%, blue 50%)";
  const s2 = `linear-gradient(${value}deg, transparent 50%, blue 50%)`;
  const s3 = value >= 90 ? s1 + "," + s2 : s0 + "," + s2;
  
  d1.style.backgroundImage = s1;
  d2.style.backgroundImage = s2;
  d3.style.backgroundImage = s3;
}

inp.value = "-90";
foo(-90);