Bars

Bars represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 <progress>, <meter> and input range elements.

<script>
    import { Bars } from 'svelte-spectre';

    let state = {
        value: 100,
        min: 10,
        low: 25,
        high: 50,
        max: 90,
        striped: false,
        animated: false,
        labled: true,
        auto: false,
    };

    $: items = state.auto
        ? []
        : [
              { value: 10, striped: true, animated: true, color: 'secondary' },
              { value: 15, striped: true, animated: true, color: 'error' },
              { value: 25, striped: true, animated: true, color: 'warning' },
              { value: 40, striped: true, animated: true, color: 'success' },
              { value: 10, striped: true, animated: true },
          ];
</script>

<Bars { ...state } bind:items />