frogress

A progress bar, but with a Frog.

Usage

With Plain HTML

Copy the contents of Frogress.html into your HTML file and set the CSS variable --progress with JS, like this:

<!-- Styles are ommited in this example -->
<div id="frogressbar"> 
    <div></div>
</div>

<script>
    let random = () => Math.floor(Math.random()*100)
    let update = () => document.querySelector("#frogressbar").style = `--progress: ${random()}%`
</script>

<button onclick="update()">Update</button>

An implementation is the website (source code).

With Svelte

Download the Frogress.svelte file and use it like this:

<script>
    import Frogress from "./Frogress.svelte"
    let value = 50;
    let random = () => Math.floor(Math.random()*100)
    let update = () => value = random()
</script>

<Frogress progress={value}/>

<button on:click={update}>Update</button>

An implementation can be found as a Svelte REPL.