Pull to refresh

<md-gb-pull-to-refresh id="news" indicator-label="Refreshing news" style="block-size: 200px">
  <ul>
    <li>Markets rally on new data</li>
    <li>City opens a new bike lane</li>
    <li>Local team wins the final</li>
    <li>Weather turns cooler this week</li>
    <li>New library hours start Monday</li>
    <li>Festival lineup announced</li>
  </ul>
</md-gb-pull-to-refresh>

const news = document.querySelector('#news');
const loadNews = () => new Promise((resolve) => setTimeout(resolve, 1500));
news.addEventListener('refresh', async () => {
  await loadNews();
  news.refreshing = false;
});

<md-gb-pull-to-refresh indicator-label="Refreshing tasks" style="block-size: 120px">
  <ul>
    <li>Water the plants</li>
    <li>Pay the rent</li>
    <li>Call the dentist</li>
  </ul>
</md-gb-pull-to-refresh>

<md-gb-icon-button id="reload" aria-label="Refresh">
  <md-gb-icon>refresh</md-gb-icon>
</md-gb-icon-button>
<md-gb-pull-to-refresh id="feed" indicator-label="Refreshing the feed" style="block-size: 160px">
  <ul>
    <li>New recipe: lemon pasta</li>
    <li>Ten tips for sourdough</li>
    <li>What to cook this weekend</li>
    <li>Pantry staples to stock</li>
  </ul>
</md-gb-pull-to-refresh>

const feed = document.querySelector('#feed');
document.querySelector('#reload').addEventListener('click', () => feed.refresh());
feed.addEventListener('refresh', () => {
  setTimeout(() => {
    feed.refreshing = false;
  }, 1500);
});

<md-gb-pull-to-refresh indicator="circular" indicator-label="Refreshing messages" style="block-size: 160px">
  <ul>
    <li>Ali: Brunch this weekend?</li>
    <li>Sandra: Summer BBQ</li>
    <li>Trevor: Oui oui</li>
    <li>Britta: Recipe to try</li>
  </ul>
</md-gb-pull-to-refresh>

<md-gb-pull-to-refresh threshold="120" indicator-label="Refreshing orders" style="block-size: 160px">
  <ul>
    <li>Order 1042: shipped</li>
    <li>Order 1041: delivered</li>
    <li>Order 1040: delivered</li>
    <li>Order 1039: returned</li>
  </ul>
</md-gb-pull-to-refresh>