podcast-list.html

<style>
:host {
  display: block;
}

.sr-only {
  position: absolute;
  left: -1000px;
  width: 1px;
  height: 1px;
}

[as="refresh"] {
  position: absolute;
  bottom: calc(100% + 32px);
  width: 100%;
  text-align: center;
  z-index: 999;
  pointer-events: none;
  color: var(--shaded);

  &.released {
    transition: all .3s ease;
  }

  &.will-refresh {
    color: var(--foreground);
  }

  &.pulled-33 .inner,
  &.pulled-66 .middle,
  &.pulled-100 .outer {
    opacity: 1;
  }
}

.bug {
  .backdrop {
    fill: var(--background);
  }

  & path {
    stroke: currentColor;
    stroke-width: 2px;
    fill: none;
    transition: color .2s linear, opacity .2s linear;
  }

  .waves {
    stroke-dasharray: 8px 2px;
    opacity: 0;
  }
}
</style>
<div role="list" as="list">
  <slot></slot>
</div>
<div as="refresh">
  <svg width=64 height=64 class="bug">
    <circle cx=32 cy=32 r=32 class="backdrop" />
    <path d="M24,56 L32,36 L40,56 L29,46 l6,0 L24,56" class="tower" />
    <path d="M16,46 A22,22 0 1 1 48,46" class="waves outer" />
    <path d="M22,40 A14,14 0 1 1 42,40" class="waves middle" />
    <path d="M27,36 A7,7 0 1 1 37,36" class="waves inner" />
  </svg>
</div>