Blazor Linear Gauge Example - Step Progress Bar Implementation

This sample demonstrates a Linear Gauge configured as a step progress bar to indicate shipment status. The gauge renders discrete milestones along a single axis to provide an at‑a‑glance view of transit progress from origin to delivery.

The step progress bar is constructed by combining an axis with multiple pointers and ranges; pointers mark current or targeted milestones while ranges visually represent completed, in‑progress, and pending segments. Customizable pointer styles, range colors, and labels let you convey status, dates, or percentage completion clearly.

Interactive tooltips appear on hover or tap to reveal precise values and contextual information for each milestone. The sample demonstrates snapping behavior to the nearest tick or indicator and shows how to format tooltip content for units, dates, or custom text.

Controls in the example let you adapt appearance and layout without changing core logic: adjust orientation, container styling, pointer types, and color mapping to match your UI. Consider accessibility—ensure sufficient contrast, readable font sizes, and keyboard navigation—so the progress bar remains usable for all users.

The component exposes configuration properties and events to integrate with application logic: bind pointer values or range boundaries to your view model, handle change events to persist status, and use templates to customize labels. Enable animations for smooth transitions when progress advances between milestones, and use event hooks to trigger notifications or data refreshes so the visual bar remains consistent with underlying shipment state.

For implementation details and configuration examples, see the getting started documentation.