lc_circle_* and lc_circle_bg_*
Display single percentages or completion status with circular progress indicators.
Element Setup
Main Circle:
- Element type:
<circle> - ID format:
lc_circle_*(e.g.,lc_circle_completion,lc_circle_score)
Background Circle (Optional):
- Element type:
<circle> - ID format:
lc_circle_bg_* - Creates semi-transparent background at 30% opacity
Input Format
Simple Percentage:
"50"
Sets circular progress to 50%
Value Clamping
- Range: 1% to 100%
- Values above 100% → clamped to 100%
- Negative values → not processed
- 0 values → converted to 1% (minimum)
Usage Example
<!-- In your SVG -->
<circle id="lc_circle_bg_completion" cx="50" cy="50" r="40" fill="none" stroke="#ccc" />
<circle id="lc_circle_completion" cx="50" cy="50" r="40" fill="none" stroke="#4CAF50" />
<!-- In your dataset -->
{{ completion }} = "68"
Result: Circular progress displays at 68% around the circle