siimple 3.2.1 Examples Home
Experiments
A special set of experimental components.
Progress
Micro component to display the process of a task.
Added in v3.2.0
This is an experimental work in progress. There are some features that may not work properly in all browsers.
Create a div element with the siimple-progress class. To set the width of the completed bar, add a span child and change the CSS width property (from 0% to 100%).
<div class="siimple-progress siimple-progress--primary">
    <span style="width:75%;"></span>
</div>
You can also display a custom label in the bar adding it inside the span element.
50% Completed
<div class="siimple-progress siimple-progress--primary">
    <span style="width:50%;">
        50% Completed
    </span>
</div>
Any truncated word inside the progress bar wont be displayed. Therefore, we recommend start the text with the percentage and then the extra text.
5% Completed
15% Completed
25% Completed
Colored progress
You can change the color of the progress bar adding a class siimple-progress--{color}:
<div class="siimple-progress siimple-progress--primary">
    <span style="width:25%;"></span>
</div>
<div class="siimple-progress siimple-progress--success">
    <span style="width:50%;"></span>
</div>
<div class="siimple-progress siimple-progress--warning">
    <span style="width:75%;"></span>
</div>
<div class="siimple-progress siimple-progress--error">
    <span style="width:100%;"></span>
</div>
Striped progress
You can display a progress animation adding a siimple-progress--striped class to the parent progress element:
<div class="siimple-progress siimple-progress--primary siimple-progress--striped">
    <span style="width:50%;"></span>
</div>
You can modify the velocity of the animation adding instead the siimple-progress--striped-slow or the siimple-progress--striped-fast class:
Slow animation
Normal animation
Fast animation
<div class="siimple-progress siimple-progress--primary siimple-progress--striped-slow">
    <span style="width:90%;">Slow animation</span>
</div>
<div class="siimple-progress siimple-progress--primary siimple-progress--striped">
    <span style="width:90%;">Normal animation</span>
</div>
<div class="siimple-progress siimple-progress--primary siimple-progress--striped-fast">
    <span style="width:90%;">Fast animation</span>
</div>
Animated progress with JavaScript
You can use JavaScript to update the progress bar width.
50%
0%
25%
50%
75%
100%
<div class="siimple-progress siimple-progress--primary siimple-progress--striped">
    <span style="width:50%;">50%</span>
</div>
<div align="center">
    <div class="siimple-btn siimple-btn--primary siimple-btn--small" id="progress-0">0%</div>
    <div class="siimple-btn siimple-btn--primary siimple-btn--small" id="progress-25">25%</div>
    <div class="siimple-btn siimple-btn--primary siimple-btn--small" id="progress-50">50%</div>
    <div class="siimple-btn siimple-btn--primary siimple-btn--small" id="progress-75">75%</div>
    <div class="siimple-btn siimple-btn--primary siimple-btn--small" id="progress-100">100%</div>
</div>
<script type="text/javascript">
    let updateProgress = function (value) {
        let progressElement = document.getElementById("progress");
        progressElement.style.width = value;
        progressElement.textContent = value;
    };
    document.getElementById("progress-0").addEventListener("click", function () {
        return updateProgress("0%");
    });
    document.getElementById("progress-25").addEventListener("click", function () {
        return updateProgress("25%");
    });
    document.getElementById("progress-50").addEventListener("click", function () {
        return updateProgress("50%");
    });
    document.getElementById("progress-75").addEventListener("click", function () {
        return updateProgress("75%");
    });
    document.getElementById("progress-100").addEventListener("click", function () {
        return updateProgress("100%");
    });
</script>
Found a mistake or want to help improve this documentation? Suggest changes.