`<bio-progress-ring>`

A circular progress indicator showing episode adherence — how many days the user has completed out of their current program day. Supports both static configuration and profile-driven mode.

<bio-progress-ring size="180" stroke-width="12"></bio-progress-ring>

How It Works

When <bio-progress-ring> receives context from a parent <bio-provider>:

Resolves progress data — in profile-driven mode, reads current_day, completed_days, total_days, adherence_pct, and streak from the SDK config's progress section
Renders an SVG ring — the arc fill represents adherence percentage, animated on load
Shows key metrics — day count, total days, adherence percentage, and current streak
Handles zero state — when no days are completed, shows a friendly "Day N, just getting started!" message instead of "0 of N days"

Modes

Profile-Driven Mode

Omit all attributes and let the widget auto-configure from the episode profile:

<bio-progress-ring size="180" stroke-width="12"></bio-progress-ring>

Static Mode

Pass progress data directly as attributes:

<bio-progress-ring
  current-day="5"
  completed-days="4"
  total-days="30"
  streak="3"
  size="180"
  stroke-width="12">
</bio-progress-ring>

Attributes

Attribute	Type	Required	Description
`size`	`number`	No	Diameter of the ring in pixels. Defaults to `120`.
`stroke-width`	`number`	No	Width of the ring stroke in pixels. Defaults to `10`.
`current-day`	`number`	No	Current program day. Falls back to profile-driven value.
`completed-days`	`number`	No	Number of days completed. Falls back to profile-driven value.
`total-days`	`number`	No	Total program days. Falls back to profile-driven value.
`streak`	`number`	No	Current consecutive-day streak. Falls back to profile-driven value.
`episode-id`	`string`	No	Episode ID. Falls back to the episode resolved by `<bio-provider>`.

CSS Classes

Class	Element
`.bio-progress-ring`	Outer container (flex column, centered)
`.bio-progress-ring-label`	Day count row
`.bio-progress-ring-day`	Bold day number
`.bio-progress-ring-total`	"/ 30 days" suffix
`.bio-progress-ring-adherence`	Adherence text or getting-started message
`.bio-progress-ring-streak`	Streak badge (e.g., "3-day streak")

CSS Custom Properties

Property	Default	Description
`--bio-primary`	`#5a8a6a`	Ring fill color
`--bio-border`	`#e2e8f0`	Ring track (unfilled) color
`--bio-surface-muted-fg`	`#64748b`	Secondary text color
`--bio-status-yellow`	`#eab308`	Streak badge color

Code Examples

Profile-Driven

<bio-provider
  api-key="org_your_key"
  project-key="proj_your_key"
  xuser-id="user-123">

  <bio-progress-ring size="200" stroke-width="14"></bio-progress-ring>

</bio-provider>

Custom Styling

bio-progress-ring {
  --bio-primary: #1a73e8;
  --bio-status-yellow: #f59e0b;
}

.bio-progress-ring-day {
  font-size: 2rem;
}

bio-progress-ring

On this page