Pull to Refresh

Native pull-to-refresh interaction using touch events. Works inside a scrollable container without affecting the page scroll.

Live Demo

  • Feed Item 1
  • Feed Item 2
  • Feed Item 3

HTML Structure

<section class="pullrefresh" data-component="pullrefresh" aria-label="Pull to refresh demo">
  <output aria-live="polite">Pull down to refresh</output>
  <section data-role="surface" tabindex="0" aria-label="Refresh surface">
    <h2>Feed</h2>
    <p>Your content here...</p>
  </section>
</section>

Required Markup Contract

  • Use data-component="pullrefresh" on the root container
  • Include an indicator element (e.g., <output>) with aria-live for status updates
  • Provide a refresh surface marked with data-role="surface"
  • Make the surface focusable with tabindex="0"
  • Refresh events dispatch as axiom:refresh custom event

JavaScript Integration

document.addEventListener('axiom:refresh', async (event) => {
  console.log('Refreshing content...');
  // Fetch new data
  // Update DOM
  // Reset indicator
});

Use Cases

  • Mobile feeds and timelines
  • Real-time notification centers
  • Chat or messaging interfaces
  • Data-heavy dashboards
  • Social media feeds

Accessibility

  • Uses aria-live to announce status updates
  • Surface is keyboard accessible with tabindex="0"
  • Clear visual and textual feedback
  • Works with screen readers

Features

  • Semantic Structure - Built with native HTML5 elements for maximum reliability.
  • Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
  • Fully Responsive - Scales perfectly from mobile to desktop screens.
  • No JS Dependency - Core functionality relies on pure CSS for maximum performance.
  • Customizable - Easily extendable via Axiom01's design tokens and modifiers.