<div id="pie"></div>

@import "https://unpkg.com/open-props/easings.min.css";

@layer demo {
  #pie {
    --ng: 270deg; /* can be set via slider */
    --thickness: 20px;
    --_inner: calc(70% - var(--thickness));
    --_outer: calc(var(--_inner) + 1px); /* fixes aliasing */
    
    /* hides the inner part of the conic gradient */
    mask: radial-gradient(circle, #0000 var(--_inner), #000 var(--_outer));
    
    /* the conic gradient, transparent after --ng */
    background-image: conic-gradient(#0000 var(--ng), white 0);
    
    animation: rotate .8s var(--ease-out-4) infinite;
  }
}

@keyframes rotate {
  to {
    rotate: 1turn;
  }
}

@layer demo.support {
  #pie {
    aspect-ratio: 1;
    inline-size: 50vmin;
    border-radius: 50%;
  }
  
  .chart {
    display: grid;
    place-items: center;
  }
  
  .chart > * {
    grid-area: 1/1;
  }
  
  .chart > h3 {
    font-variant-numeric: tabular-nums;
  }
  
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
    color-scheme: dark light;
    background: oklch(5% .2 330)
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;

    display: grid;
    place-content: center;
    gap: 5vmin;
  }
}