Last active
April 17, 2025 04:20
-
-
Save risuvoo/e6e52aba55f899b87da495f4fce4b848 to your computer and use it in GitHub Desktop.
Circular Progress Pure Css and SVG
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html======== | |
| <div class="mini-chart"> | |
| <svg> | |
| <circle | |
| stroke="#e8e8e8" | |
| cx="38" | |
| cy="38" | |
| r="33" | |
| ></circle> | |
| <!-- | |
| NOTE: style="--percent: 30" You can set dynamic balue | |
| and static value as per your choice. ex: --percent: 95 | |
| --> | |
| <circle | |
| cx="38" | |
| cy="38" | |
| r="33" | |
| style="--percent: 30" | |
| stroke="#0a192f" | |
| ></circle> | |
| </svg> | |
| <div class="number"> | |
| <!-- | |
| NOTE: If you have change circle style value also need | |
| to change this value or remove this if don't need | |
| --> | |
| <p> | |
| 30 | |
| <span>%</span> | |
| </p> | |
| </div> | |
| </div> | |
| css======== | |
| .mini-chart { | |
| position: relative; | |
| } | |
| .mini-chart svg { | |
| position: relative; | |
| width: 76px; | |
| height: 76px; | |
| transform: rotate(-90deg); | |
| } | |
| .mini-chart svg circle { | |
| width: 100%; | |
| height: 100%; | |
| fill: none; | |
| stroke-width: 6; | |
| stroke-linecap: round; | |
| } | |
| /* | |
| NOTE: why stroke-dasharray 207px ? | |
| Because stroke-dasharray have rules 2 * 3.1415 * 33. 2 is circumference, 3.1415 is PI (π) value and 33 is circle radius | |
| */ | |
| .mini-chart svg circle:last-of-type { | |
| stroke-dasharray: 207px; | |
| stroke-dashoffset: calc( | |
| 207px - (207px * var(--percent)) / 100 | |
| ); | |
| } | |
| .mini-chart .number { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| .mini-chart .number h3 { | |
| font-size: 14px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment