Days Remaining Indicator

css

by moob

HTML

<div>

  <h1>
    Days Remaining Indicator
  </h1>
  <p>
    Border changes from blue to red depending on how much time remains:
  </p>

  <div class="daysRemainingIndicator" style="--daysSoFar:13"></div>
  <div class="daysRemainingIndicator" style="--daysSoFar:200"></div>
  <div class="daysRemainingIndicator" style="--daysSoFar:350"></div>
  <p>
    You can optionally pass a custom duration in days:
  </p>
  <div class="daysRemainingIndicator" style="--durationInDays:10000; --daysSoFar:1500"></div>
  <div class="daysRemainingIndicator" style="--durationInDays:40; --daysSoFar:20"></div>
  <div class="daysRemainingIndicator" style="--durationInDays:4; --daysSoFar:3"></div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');
html, body {margin:0;}
body {
  display: grid;
  height: 100vh; 
  place-items: center;
  background: #eee;
  font-family: 'Montserrat', sans-serif;
  padding-inline:20px;
}
.daysRemainingIndicator {
  --daysSoFar: 0;
  --durationInDays: 365;
  --deg: calc((360deg / var(--durationInDays)) * var(--daysSoFar));
  --r: calc((255 / var(--durationInDays)) * var(--daysSoFar));
  --g: 0;
  --b: calc(255 - var(--r));
  --rgb: rgb(var(--r) var(--g) var(--b));
  --line-thickness: 4px;
  --line-feather: 2deg;
  display:inline-block;
  background-image: conic-gradient(#ddd calc(var(--deg) - var(--line-feather)), var(--rgb) var(--deg));
  width:auto;
  min-width:3em;
  font-size:1.5rem;
  border-radius:50px;
}
.daysRemainingIndicator:before {
  --daysRemaining: calc(var(--durationInDays) - var(--daysSoFar));
  counter-reset: daysRemaining var(--daysRemaining);
  content: counter(daysRemaining);
  display:block;
  margin:var(--line-thickness);
  padding-inline:0.5em;
  background:white;
  text-align:center;
  border-radius:1em;
  font-weight:bold;
}