Back to Dictionary
Action Feedback
●●●Requires Setup

Pull-to-Refresh

A gesture-driven reveal of a loading indicator when a user scrolls past the top edge of a content area, triggering a data refresh.

Live Demo

What It Is

A gesture-driven reveal of a loading indicator when a user scrolls past the top edge of a content area, triggering a data refresh.

✓When to Use

  • Mobile web apps or PWAs
  • Feeds and lists that update frequently
  • Touch-first interfaces

✕When NOT to Use

  • Desktop-heavy interfaces (use a refresh button instead)
  • Static pages

Configuration Tips

  • 01Map the user pull distance directly to the indicator rotation/scale before the threshold is met
  • 02Snap to a spinning state once the refresh is triggered

You've Seen It In

TwitterChrome MobileInstagram

Prompt Templates

Copy and paste these prompts into your AI coding assistant.

Add a mobile-style pull-to-refresh indicator at the top of this list.

Code Example (Tailwind CSS)

export function PullToRefreshDemo() {}

Related Effects

Spinner / Loading Circle

A circular animated icon that rotates continuously, signaling that a process is underway. The most universally recognized loading indicator.

Swipe Gesture Hint

A subtle, bouncing horizontal nudge on a list item indicating that it can be swiped to reveal hidden actions (like delete or archive).