Containers
PullRefresh
The round indicator for pull down to refresh on phones, where Makado runs as a web app saved to the home screen (no browser refresh button there).
Preview
Props
| Prop | Type | Description |
|---|---|---|
progress | number | 0 to 1 while pulling: it slides down and its arrow turns; at 1, letting go refreshes. |
refreshing | boolean | Spins until the refresh is done. |
className | string |
Guidelines
The round indicator for pull down to refresh on phones, where Makado runs as a web app saved to the home screen (no browser refresh button there).
Provide: progress (0 to 1 while the page is pulled down past its top) and refreshing (true while the data reloads).
- It comes down from the top on a solid elevated dot as you pull, its arrow turning with the pull. At 1 it turns the accent color: letting go refreshes. While refreshing the arrow spins (still with reduced motion) and it is announced as Refreshing.
- The app reloads its data in place (no full page load) and the indicator goes away when the data is back. Pulling only starts at the very top of the page, never inside a scrolling list or a sheet.