<div class="gjs-circle-counter relative w-32 text-center mx-auto" data-gjs-type="p_website.circle-counter" data-gjs-custom-name="Circle counter" data-value="80" data-duration="1200" data-suffix="%">
<svg viewBox="0 0 36 36" class="gjs-circle-counter-svg w-32 h-32 text-base-300" aria-hidden="true">
<path class="gjs-circle-counter-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3"/>
<path class="gjs-circle-counter-fg text-primary" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3" stroke-dasharray="0, 100"/>
</svg>
<div class="gjs-circle-counter-value absolute inset-0 flex items-center justify-center text-xl font-bold text-base-content pt-8">0%</div>
<div class="gjs-circle-counter-label mt-2 text-sm text-base-content/60 font-medium" data-gjs-editable="true">Complete</div>
</div>