ComponentsFeedback

Pull to Refresh

Feedback components with live demos, API references, and tokens.

Summary

PMatPullToRefresh adds a mobile-first, elastic refresh gesture to existing content. Its vertical SVG and text indicator floats above stationary content by default, resolves normal and Ionic scroll elements, exposes a deterministic typed lifecycle, respects safe areas, and remains dependency-free.

Quick Start

Refresh activity

Pull from the top, or use the visible keyboard-accessible action.

Not refreshed yet
AW
Alina WongShared a new statement
PM
Property managerUpdated the payment status
HTML

Lifecycle

1

Pulling

Vertical intent is accepted only while the resolved scroller is at the top.

2

Ready

Progress reaches one, the release instruction is announced, and optional haptics run once.

3

Refreshing

The indicator locks at its hold distance until the consumer calls complete. Only the opt-in push layout moves content.

4

Completing

The result is announced, the indicator settles, and the component returns to idle.