description = "Page Loader"

[viewBag]
==
<div class="loader position-fixed pos-0 w-100 h-100 bg-white z-100">
    <div class="d-flex justify-content-center align-items-center h-100">
        {% if this.theme.addons_loader_style == 'rotating-plane' %}
        <div class="rotating-plane"></div>
        {% elseif this.theme.addons_loader_style == 'double-bounce' %}
        <div class="double-bounce">
            <div class="child double-bounce1"></div>
            <div class="child double-bounce2"></div>
        </div>
        {% elseif this.theme.addons_loader_style == 'wave' %}
        <div class="wave">
            <div class="rect rect1"></div>
            <div class="rect rect2"></div>
            <div class="rect rect3"></div>
            <div class="rect rect4"></div>
            <div class="rect rect5"></div>
        </div>
        {% elseif this.theme.addons_loader_style == 'wandering-cubes' %}
        <div class="wandering-cubes">
            <div class="cube cube1"></div>
            <div class="cube cube2"></div>
        </div>
        {% elseif this.theme.addons_loader_style == 'spinner' %}
        <div class="spinner spinner-pulse"></div>
        {% elseif this.theme.addons_loader_style == 'chasing-dots' %}
        <div class="chasing-dots">
            <div class="child dot1"></div>
            <div class="child dot2"></div>
        </div>
        {% elseif this.theme.addons_loader_style == 'three-bounce' %}
        <div class="three-bounce">
            <div class="child bounce1"></div>
            <div class="child bounce2"></div>
            <div class="child bounce3"></div>
        </div>
        {% elseif this.theme.addons_loader_style == 'circle' %}
        <div class="circle">
            <div class="circle1 child"></div>
            <div class="circle2 child"></div>
            <div class="circle3 child"></div>
            <div class="circle4 child"></div>
            <div class="circle5 child"></div>
            <div class="circle6 child"></div>
            <div class="circle7 child"></div>
            <div class="circle8 child"></div>
            <div class="circle9 child"></div>
            <div class="circle10 child"></div>
            <div class="circle11 child"></div>
            <div class="circle12 child"></div>
        </div>
        {% elseif this.theme.addons_loader_style == 'cube-grid' %}
        <div class="cube-grid">
            <div class="cube cube1"></div>
            <div class="cube cube2"></div>
            <div class="cube cube3"></div>
            <div class="cube cube4"></div>
            <div class="cube cube5"></div>
            <div class="cube cube6"></div>
            <div class="cube cube7"></div>
            <div class="cube cube8"></div>
            <div class="cube cube9"></div>
        </div>
        {% elseif this.theme.addons_loader_style == 'fading-circle' %}
        <div class="fading-circle">
            <div class="circle1 circle"></div>
            <div class="circle2 circle"></div>
            <div class="circle3 circle"></div>
            <div class="circle4 circle"></div>
            <div class="circle5 circle"></div>
            <div class="circle6 circle"></div>
            <div class="circle7 circle"></div>
            <div class="circle8 circle"></div>
            <div class="circle9 circle"></div>
            <div class="circle10 circle"></div>
            <div class="circle11 circle"></div>
            <div class="circle12 circle"></div>
        </div>
        {% elseif this.theme.addons_loader_style == 'folding-cube' %}
        <div class="folding-cube">
            <div class="cube1 cube"></div>
            <div class="cube2 cube"></div>
            <div class="cube4 cube"></div>
            <div class="cube3 cube"></div>
        </div>
        {% endif %}
    </div>
</div>

{% put scripts %}
<script>
//Loader
$(function() {
    $(".loader").fadeOut()
});
</script>
{% endput %}