{% set header_title = 'Progress Bars' %}
{% set header_size = 'sm' %}
{% extends 'layouts/layout-1.html' %}

{% block content %}

    <div class="nk-box">
        <div class="nk-gap-4"></div>
        <div class="container">
            <div class="row vertical-gap">
                <div class="col-md-4">
                    <div class="nk-progress nk-progress-xs nk-count" data-progress="91" data-progress-mask="{$}%">
                        <div class="nk-progress-title">JavaScript</div>
                        <div class="nk-progress-line">
                            <div style="width: 91%">
                                <div class="nk-progress-percent">91%</div>
                            </div>
                        </div>
                    </div>

                    <div class="nk-progress nk-progress-sm nk-count" data-progress="72" data-progress-mask="{$}%">
                        <div class="nk-progress-title">PHP</div>
                        <div class="nk-progress-line">
                            <div style="width: 72%">
                                <div class="nk-progress-percent">72%</div>
                            </div>
                        </div>
                    </div>

                    <div class="nk-progress nk-count" data-progress="86" data-progress-mask="{$}%">
                        <div class="nk-progress-title">Photoshop</div>
                        <div class="nk-progress-line">
                            <div style="width: 86%">
                                <div class="nk-progress-percent">86%</div>
                            </div>
                        </div>
                    </div>

                    <div class="nk-progress nk-progress-md nk-count" data-progress="43" data-progress-mask="{$}%">
                        <div class="nk-progress-title">Paint</div>
                        <div class="nk-progress-line">
                            <div style="width: 43%">
                                <div class="nk-progress-percent">43%</div>
                            </div>
                        </div>
                    </div>

                    <div class="nk-progress nk-progress-lg nk-count" data-progress="16" data-progress-mask="{$}%">
                        <div class="nk-progress-title">Illustrator</div>
                        <div class="nk-progress-line">
                            <div style="width: 16%">
                                <div class="nk-progress-percent">16%</div>
                            </div>
                        </div>
                    </div>

                    <div class="nk-progress nk-progress-xlg nk-count" data-progress="100" data-progress-mask="{$}%">
                        <div class="nk-progress-title">Google Chrome</div>
                        <div class="nk-progress-line">
                            <div style="width: 100%">
                                <div class="nk-progress-percent">100%</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="nk-progress nk-progress-xs nk-count" data-progress="91" data-progress-mask="{$}%">
                        <div class="nk-progress-title">JavaScript</div>
                        <div class="nk-progress-line">
                            <div class="bg-main-1" style="width: 91%">
                                <div class="nk-progress-percent">91%</div>
                            </div>
                        </div>
                    </div>

                    <div class="nk-progress nk-progress-sm nk-count" data-progress="72" data-progress-mask="{$}%">
                        <div class="nk-progress-title">PHP</div>
                        <div class="nk-progress-line">
                            <div class="bg-main-2" style="width: 72%">
                                <div class="nk-progress-percent">72%</div>
                            </div>
                        </div>
                    </div>

                    <div class="nk-progress nk-count" data-progress="86" data-progress-mask="{$}%">
                        <div class="nk-progress-title">Photoshop</div>
                        <div class="nk-progress-line bg-dark-4">
                            <div class="bg-main-3" style="width: 86%">
                                <div class="nk-progress-percent">86%</div>
                            </div>
                        </div>
                    </div>

                    <div class="nk-progress nk-progress-md nk-count" data-progress="43" data-progress-mask="{$}%">
                        <div class="nk-progress-title">Paint</div>
                        <div class="nk-progress-line bg-dark-1">
                            <div class="bg-main-4" style="width: 43%">
                                <div class="nk-progress-percent">43%</div>
                            </div>
                        </div>
                    </div>

                    <div class="nk-progress nk-progress-lg nk-count" data-progress="16" data-progress-mask="{$}%">
                        <div class="nk-progress-title text-primary">Illustrator</div>
                        <div class="nk-progress-line">
                            <div class="bg-primary" style="width: 16%">
                                <div class="nk-progress-percent text-primary">16%</div>
                            </div>
                        </div>
                    </div>

                    <div class="nk-progress nk-progress-xlg nk-count" data-progress="100" data-progress-mask="{$}%">
                        <div class="nk-progress-title text-success">Google Chrome</div>
                        <div class="nk-progress-line bg-success">
                            <div class="bg-gray-4" style="width: 100%">
                                <div class="nk-progress-percent text-success">100%</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">

                    <div class="nk-progress nk-count" data-progress="43" data-progress-mask="{$}%">
                        <div class="nk-progress-line">
                            <div style="width: 43%"></div>
                        </div>
                    </div>

                    <div class="nk-progress nk-count" data-progress="91" data-progress-mask="{$}%">
                        <div class="nk-progress-title">JavaScript</div>
                        <div class="nk-progress-line">
                            <div style="width: 91%">
                                <div class="nk-progress-percent sr-only">91%</div>
                            </div>
                        </div>
                    </div>

                    <div class="nk-progress nk-count" data-progress="72" data-progress-mask="{$}%">
                        <div class="nk-progress-title text-right">PHP</div>
                        <div class="nk-progress-line">
                            <div style="width: 72%">
                                <div class="nk-progress-percent">72%</div>
                            </div>
                        </div>
                    </div>

                    <div class="nk-progress nk-progress-percent-static nk-count" data-progress="86" data-progress-mask="{$}%">
                        <div class="nk-progress-title">Photoshop</div>
                        <div class="nk-progress-line">
                            <div style="width: 86%">
                                <div class="nk-progress-percent">86%</div>
                            </div>
                        </div>
                    </div>

                    <div class="nk-progress nk-progress-percent-static" data-progress="67" data-progress-mask="{$}%">
                        <div class="nk-progress-title">No Animation</div>
                        <div class="nk-progress-line">
                            <div style="width: 67%">
                                <div class="nk-progress-percent">67%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nk-gap-4"></div>
        <div class="nk-gap-4"></div>
    </div>
{% endblock %}