<script>
  import ProgressMeter from "$/client/components/ProgressMeter.svelte";
  let progress = 50;
</script>

<style>
  progress {
    width: 50%;
  }

  meter {
    width: 50%;
  }

  input {
    width: 5ch;
  }
</style>

<p>HTML has a default <b>progress</b> tag you can use and it looks like this:</p>
<progress value={ progress } max="100"></progress>

<p>There's also <b>meter</b> tags that look a little different.</p>

<meter value={ progress } max="100">
</meter>

<p>Since those tags are already taken, ours will be called...<b>progress-meter</b>!</p>

<ProgressMeter percent={ progress } />
<br/>
<input placeholder="Percent Progress" type="numeric" bind:value={ progress } />

