Progress Bar

A Hugo shortcode to display a simple progress bar.

# file.md

{{< progress_bar percent="46" label="46%" >}}

# progress_bar.html

<!-- Simple no CSS framework elements https://www.w3schools.com/howto/howto_js_progressbar.asp -->
<style>
    #myProgress {
        width: 100%;
        background-color: #ddd;
    }

    #myBar {
        width: {{.Get "percent"}}%;
        height: 30px;
        background-color: #04AA6D;
        text-align: center;
        line-height: 30px;
        color: white;
    }
</style>
<script>

</script>
<div id="myProgress">
    <div id="myBar">{{ with .Get "label"}}{{ . }}{{ end }}</div>
</div>