---
title: Navigation Progress
---

<script>
  import { NavigationProgress, Button } from 'slender-ui'
  import { ComponentContainer } from '$lib'

  let progress

  const navigate = () => {
    progress.start()

    setTimeout(progress.end, 3000)
  }
</script>

<ComponentContainer class="flex-col">
  <Button label="Navigate!" on:click={ navigate } color="primary" />

  <div class="w-4/5 !shadow-none">
    <NavigationProgress bind:this={ progress } class="static mt-4" />
  </div>

  <div slot="code">

```svelte
<!-- +layout.svelte -->
<script>
  import { NavigationProgress } from 'slender-ui'
</script>

<NavigationProgress />
```

  </div>
</ComponentContainer>