You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
bandolier-website/admin/bando/demos/Progress.svelte

34 lines
691 B

<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 } />