Install
That writes one file:compositions/components/conic-progress-ring.html.
Paste it into your composition
Opencompositions/components/conic-progress-ring.html and copy what is inside into your own composition.
A component has no size or duration of its own. It takes both from the composition
you paste it into.
Variables
Every one of these has a default, so the piece works untouched. Set the ones you want to change on the element:| Variable | Default | Accepts | What it does |
|---|---|---|---|
progress | 100 | 0% to 100%, step 1% | Target angular fill from 0 to 100. |
thickness | 12 | 4% to 30%, step 1% | Ring stroke thickness as a percent of the ring radius. |
label | 100 | string | Numeric target shown in the center and counted in sync with the fill. |
data-variable-values on the element that mounts it. These are the
defaults, so this behaves exactly like the preview above until you change one:
<div
data-composition-id="conic-progress-ring"
data-composition-src="compositions/components/conic-progress-ring.html"
data-variable-values='{"progress":100,"thickness":12,"label":"100"}'
></div>
Source
conic-progress-ring.html
conic-progress-ring.html
<!doctype html>
<!--
conic-progress-ring: HyperFrames video primitive (data / prove / demonstrate)
Concept: one registered percentage moves the hard frontier of a conic
gradient while a radial mask cuts out the center. The center value is
derived from that same percentage on every GSAP update, so fill and count
cannot drift apart.
Compiled-from evidence: hyperframes-research-css-gems.md, section 10,
"Registered conic progress ring". The finding specifies a typed percentage
as the seek handle for a conic-gradient frontier and a radial mask for the
ring cutout.
Use when: a scene needs to prove completion, attainment, or a measured
result with one immediately legible data mark.
Variables:
progress number 0 to 100 default 100 target angular fill
thickness number 4 to 30 default 12 ring stroke as a percent
label string default "100" center count target
Envelope:
IN 1.40s fixed fill and synchronized count, power2.out
HOLD elastic and deliberately still after the result settles
OUT 0.50s fixed opacity release, power2.in
For durations shorter than 1.90s, IN and OUT scale together. HOLD is the
only elastic phase. The timeline is never time-scaled.
Sync point:
progress-settled at the end of IN, always outside the elastic HOLD
Sound cues: none. A data proof should not claim an audio event for its host.
Mount contract: this file is a template-wrapped sub-composition. The host
owns dimensions. #root fills that box with inset:0 and has no data-width or
data-height. The hardcoded composition id matches the root and timeline key.
-->
<html
lang="en"
data-composition-variables='[
{ "id": "progress", "type": "number", "role": "content", "label": "Progress", "description": "Target angular fill from 0 to 100.", "default": 100, "min": 0, "max": 100, "step": 1, "unit": "%" },
{ "id": "thickness", "type": "number", "role": "layout", "label": "Thickness", "description": "Ring stroke thickness as a percent of the ring radius.", "default": 12, "min": 4, "max": 30, "step": 1, "unit": "%" },
{ "id": "label", "type": "string", "role": "content", "label": "Center label", "description": "Numeric target shown in the center and counted in sync with the fill.", "default": "100" }
]'
>
<head>
<meta charset="UTF-8" />
<title>Conic Progress Ring</title>
</head>
<body>
<template>
<div id="root" data-composition-id="conic-progress-ring" data-duration="4" data-fps="30">
<style>
/* The registration must live in this document-level stylesheet.
Registrations inside shadow roots are ignored by the platform. */
@property --ring-progress {
syntax: "<percentage>";
inherits: false;
initial-value: 0%;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
/* INVARIANT: #root is the mount contract owner. The host owns the
box, and every internal measurement is relative to that box. */
#root {
position: absolute;
inset: 0;
container-type: size;
isolation: isolate;
overflow: hidden;
color: var(--fg, #f4f7fb);
font-family: var(--font-display, Inter, system-ui, sans-serif);
}
.ring-clip {
width: 100%;
height: 100%;
display: grid;
place-items: center;
}
.ring-stage {
position: relative;
width: min(68cqw, 68cqh);
aspect-ratio: 1;
}
/* EDIT ZONE: --ring-thickness is the only geometry control.
--ring-progress is the only registered animation scalar. Paint
comes only from the host theme's surface and brand tokens. */
.ring {
--ring-thickness: 12%;
--ring-progress: 0%;
position: absolute;
inset: 0;
border-radius: 50%;
background: conic-gradient(
from -90deg,
var(--brand, #35d6a0) 0 var(--ring-progress),
var(--surface, #1b2938) var(--ring-progress) 100%
);
-webkit-mask: radial-gradient(
farthest-side,
transparent calc(100% - var(--ring-thickness)),
var(--fg, #f4f7fb) 0
);
mask: radial-gradient(
farthest-side,
transparent calc(100% - var(--ring-thickness)),
var(--fg, #f4f7fb) 0
);
}
.ring-label {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: var(--fg, #f4f7fb);
font-size: min(18cqw, 18cqh);
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: -0.04em;
line-height: 1;
text-align: center;
}
</style>
<div
id="conic-progress-ring-clip"
class="ring-clip clip"
data-start="0"
data-duration="4"
data-track-index="0"
>
<div class="ring-stage">
<div
class="ring"
role="progressbar"
aria-label="Progress"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="0"
></div>
<div class="ring-label" aria-hidden="true">0</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script>
(function () {
"use strict";
var root = document.getElementById("root");
var compositionId = "conic-progress-ring";
var stage = root.querySelector(".ring-stage");
var ring = root.querySelector(".ring");
var label = root.querySelector(".ring-label");
var vars =
window.__hyperframes && window.__hyperframes.getVariables
? window.__hyperframes.getVariables()
: {};
/* INVARIANT: zero is a valid progress value, so missing and zero
are handled separately. Both numeric controls clamp to their
declared ranges before they reach layout or animation. */
var progressValue = Number(vars.progress);
var targetProgress = Number.isFinite(progressValue)
? Math.max(0, Math.min(100, progressValue))
: 100;
var thicknessValue = Number(vars.thickness);
var thickness = Number.isFinite(thicknessValue)
? Math.max(4, Math.min(30, thicknessValue))
: 12;
var labelText = vars.label == null ? "100" : String(vars.label);
var labelMatch = labelText.trim().match(/^(-?\d+(?:\.\d+)?)(.*)$/);
var labelTarget = labelMatch ? Number(labelMatch[1]) : null;
var labelSuffix = labelMatch ? labelMatch[2] : "";
ring.style.setProperty("--ring-thickness", thickness + "%");
function updateLabel(fillPercent) {
var ratio = targetProgress > 0 ? fillPercent / targetProgress : 1;
label.textContent =
labelTarget == null ? labelText : Math.round(labelTarget * ratio) + labelSuffix;
ring.setAttribute("aria-valuenow", String(Math.round(fillPercent)));
}
updateLabel(0);
/* RETIME RANGE: IN_BASE and OUT_BASE own the lifecycle timing.
The fill uses --ease-standard's GSAP form, power2.out. */
var IN_BASE = 1.4;
var OUT_BASE = 0.5;
var durationValue = Number(root.dataset.duration);
var duration = Number.isFinite(durationValue) && durationValue > 0 ? durationValue : 4;
var scale = duration < IN_BASE + OUT_BASE ? duration / (IN_BASE + OUT_BASE) : 1;
var IN = IN_BASE * scale;
var OUT = OUT_BASE * scale;
var HOLD = Math.max(0, duration - IN - OUT);
var OUT_START = IN + HOLD;
var tl = gsap.timeline({ paused: true });
tl.fromTo(
ring,
{ "--ring-progress": "0%" },
{
"--ring-progress": targetProgress + "%",
duration: IN,
ease: "power2.out",
onUpdate: function () {
updateLabel(parseFloat(ring.style.getPropertyValue("--ring-progress")) || 0);
},
},
0,
);
tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
tl.seek(0);
window.__timelines = window.__timelines || {};
window.__timelines[compositionId] = tl;
})();
</script>
</div>
</template>
</body>
</html>
data progress ring conic-gradient prove demonstrate.