Progress

Polished indicators designed to showcase clinical task progression, database synchronization feeds, or surgery scheduling states.

Custom styled progress blocks matching the MediCore theme colors.

Cardiology Patient Intake 45%

Critical ICU Beds Occupied 80%

Lab Results Completed 60%

Pharmacy Refill Progress 35%

Adjust bar heights using helper utility classes like .progress-xs, .progress-sm, .progress-md, or .progress-lg.

Extra Small (4px) — .progress-xs

Small (6px) — .progress-sm

Medium (12px) — .progress-md

Large (16px) — .progress-lg

Embed label percentage values directly inside the progress bar by writing text content inside the bar, or keep them aligned outside.

Outside Label Layout

Database Telemetry Sync 70%

Inside Label Layout (Requires thicker bar)

65% Completed

Add .progress-bar-striped for a diagonal stripe background pattern, and combined with .progress-bar-animated to add smooth loading movement.

Striped Progress Bar

Animated Striped Progress Bar

Stack multiple progress bar elements inside a single parent .progress container to represent split values in a metric.

Intakes (40%)

Pending (25%)

Discharges (15%)

A stacked representation of total clinic activity today: 40% Intake registry, 25% Awaiting diagnosis, 15% Outpatient discharge.