description = "Progressbars Section"

[viewBag]
==
<?php
function onStart()
{
    $this->addJs('assets/vendor/waypoints/jquery.waypoints.min.js');
}
?>
==
<div {% if data.section_progressbars_id %}id="{{ data.section_progressbars_id }}"{% endif %} class="progressbar py-24 {{ data.section_progressbars_bg }}">
    <div class="{{ data.section_progressbars_container }}">
        <!-- Row  -->
        {% if data.section_progressbars_header or data.section_progressbars_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4">{{ data.section_progressbars_header }}</h2>
                <h6 class="text-body line-height-normal">{{ data.section_progressbars_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
        <div class="row justify-content-center">
            <div class="{{ data.section_progressbars_size }} text-center mb-7 mt-7 {% if data.section_progressbars_animation %}progressbars-{{ data.section_progressbars_id }}{% endif %}">
                {% for fields in data.section_progressbars %}
                {% if data.section_progressbars_direction == 'bar-horizontal_barHor' %}
                <h5 class="d-flex {{ data.section_progressbars_hmargin }}">{{ fields.section_progressbars_title }}
                    <span class="ml-auto">{{ fields.section_progressbars_number }}%</span>
                </h5>
                {% else %}
                <h6 class="d-inline-block m-0" style="writing-mode:vertical-rl;">
                    <span class="opacity-75">{{ fields.section_progressbars_title }}</span>
                    <span class="mt-2 mb-1">{{ fields.section_progressbars_number }}%</span>
                </h6>
                {% endif %}
                <div class="progress {{ data.section_progressbars_direction|replace({'_':' '}) }}-{{ data.section_progressbars_id }} 
                {% if data.section_progressbars_direction == 'bar-vertical_barVer' %}
                {{ data.section_progressbars_vheight }} {{ data.section_progressbars_vmargin }}
                {% endif %}
                ">
                    <div class="progress-bar {{ fields.section_progressbars_color }} 
                    {% if data.section_progressbars_animation == 0 %}{{ data.section_progressbars_style }}{% endif %} 
                    {% if data.section_progressbars_direction == 'bar-horizontal_barHor' %}
                    {{ fields.section_progressbars_height }}
                    {% else %}
                    {{ fields.section_progressbars_width }}
                    {% endif %}"
                    {% if data.section_progressbars_direction == 'bar-horizontal_barHor' %}
                    style="width:{{ fields.section_progressbars_number }}%;"
                    {% else %}
                    style="height:{{ fields.section_progressbars_number }}%;"
                    {% endif %}
                    role="progressbar">
                        <span class="sr-only">{{ fields.section_progressbars_number }}% Complete</span>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

{% if data.section_progressbars_animation %}
{% put scripts %}
<script>
//Progress bars
var smProgress = $('.progressbars-{{ data.section_progressbars_id }}');
if (smProgress.length > 0) {
    smProgress.waypoint(function () {
        jQuery('.barHor-{{ data.section_progressbars_id }}').each(function () {
			$('.barHor-{{ data.section_progressbars_id }}').find('.progress-bar').addClass('bar-horizontal-animated');
        })
    }, {
        offset: '90%'
    })
}

var smProgress = $('.progressbars-{{ data.section_progressbars_id }}');
if (smProgress.length > 0) {
    smProgress.waypoint(function () {
        jQuery('.barVer-{{ data.section_progressbars_id }}').each(function () {
			$('.barVer-{{ data.section_progressbars_id }}').find('.progress-bar').addClass('bar-vertical-animated');
        })
    }, {
        offset: '90%'
    })
}
</script>
{% endput %}
{% endif %}