pulltorefresh

Pull-to-refresh, sometimes written as pull to refresh or pulltorefresh, is a user interface pattern used in scrollable content areas on mobile devices and, in some cases, desktop applications. The pattern allows a user to trigger a content update by pulling the top of a list downward. When the user drags beyond a threshold and releases, a refresh action is started and a visual indicator—such as a spinner or progress bar—appears until the update completes.

Implementation typically uses touch event handling to detect downward drag from the top edge, a threshold for activation, and an animation for the pull motion. On activation, the content is updated via an asynchronous request, and the indicator remains visible while waiting for the response. After completion, the indicator is hidden and the list updates with new content. Some platforms provide native support for this interaction in apps, while web developers often rely on JavaScript libraries or custom code.

Design considerations include preventing interference with normal scrolling, providing a clear and accessible indicator, handling failure cases, and ensuring performance on low-end devices. Accessibility guidelines suggest providing an equivalent non-tactile control for screen readers and keyboard users, and ensuring the gesture does not conflict with other gestures.

Usage: Commonly seen in news feeds, email, and social media apps where frequent updates are expected. Variants include different visuals, such as circular spinners or linear progress bars, and different thresholds or resistance values to adjust feel. The pattern remains widely used as a lightweight, discoverable method to refresh content without explicit actions from the user.