lc_circle / lc_circle_bg
Display single percentages or completion status with circular progress indicators.
Element Setup
Section titled “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
Section titled “Input Format”Simple Percentage:
"50"Sets circular progress to 50%
Value Clamping
Section titled “Value Clamping”- Range: 1% to 100%
- Values above 100% → clamped to 100%
- Negative values → not processed
- 0 values → converted to 1% (minimum)
Usage Example
Section titled “Usage Example”{% raw %}
<!-- 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"{% endraw %}
Result: Circular progress displays at 68% around the circle