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.
34 lines
691 B
34 lines
691 B
2 years ago
|
<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 } />
|
||
|
|
|