Skip to content

Instantly share code, notes, and snippets.

@sebastiancarlos
Created August 27, 2021 21:12
Show Gist options
  • Save sebastiancarlos/1031bf1aefd0ab73dbd765233e7c9799 to your computer and use it in GitHub Desktop.
Save sebastiancarlos/1031bf1aefd0ab73dbd765233e7c9799 to your computer and use it in GitHub Desktop.
:root {
--PI: 3.14159265358979;
}
.pie {
--progress: 0;
--radius: 25;
--circumference: calc(2 * var(--radius) * var(--PI));
fill: transparent;
stroke: #ced4da;
stroke-width: calc(2 * var(--radius));
stroke-dasharray: calc(var(--progress) * var(--circumference) / 100)
var(--circumference);
transition: stroke-dasharray 1s ease;
}
.pie-background {
fill: #ebedf0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment