{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-base-progress-bars" %}
{% set title = "Progress Bars" %}

{% include "html/assets/include/nunjucks/partials/head.njk" %}
{% include "html/assets/include/nunjucks/partials/core-fonts.njk" %}
{% include "html/assets/include/nunjucks/partials/core-css.njk" %}
{% include "html/assets/include/nunjucks/partials/core-icons.njk" %}
{% include "html/assets/include/nunjucks/partials/css/css-dzsparallaxer.njk" %}
<link rel="stylesheet" href="{{ root }}assets/vendor/animate.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/jquery-ui/themes/base/jquery-ui.min.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hamburgers/hamburgers.min.css">

{% include "html/assets/include/nunjucks/partials/css/css-showcode.njk" %}

{% include "html/assets/include/nunjucks/partials/css/css-unify.njk" %}
{% include "html/assets/include/nunjucks/partials/css/css-custom.njk" %}
</head>

<body class="u-body--header-side-push-left u-body--header-side-opened u-has-sidebar-navigation g-overflow-x-hidden">
  <main>
    {% include "html/assets/include/nunjucks/partials/blocks/headers/header-main.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/sidebars/sidebar-shortcode-nav.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/page-title/shortcode-page-title/shortcode-page-title-base.njk" %}

    <section>
      <div class="g-py-100">
        <div class="container">
          <!-- Progress Bars -->
          <section>
            <!-- Heading -->
            <header class="g-mb-80">
              <div class="u-heading-v6-2  text-uppercase">
                <h2 class="h4 u-heading-v6__title g-font-weight-300">Progress Bars</h2>
              </div>

              <div class="g-line-height-2 g-pl-90">
                <p>Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit.</p>
              </div>
            </header>
            <!-- End Heading -->

            <!-- Default Progress Bars -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Default Progress Bars</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode1">
                  <div class="shortcode-html">
                    <div class="progress g-height-20 rounded-0 u-progress g-mb-20">
                      <div class="progress-bar" role="progressbar" style="width: 33%" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress g-height-20 rounded-0 u-progress g-mb-20">
                      <div class="progress-bar" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress g-height-20 rounded-0 u-progress g-mb-20">
                      <div class="progress-bar" role="progressbar" style="width: 97%" aria-valuenow="97" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div>
                </div>

                {% set contentTarget = "#shortcode1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Default Progress Bars -->

            <hr class="g-brd-gray-light-v4 g-my-60">

            <!-- Colored Progress Bars -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Colored Progress Bars</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode2">
                  <div class="shortcode-html">
                    <div class="progress g-height-20 rounded-0 u-progress g-mb-20">
                      <div class="progress-bar g-bg-blue" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress g-height-20 rounded-0 u-progress g-mb-20">
                      <div class="progress-bar g-bg-darkblue" role="progressbar" style="width: 42%" aria-valuenow="42" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress g-height-20 rounded-0 u-progress g-mb-20">
                      <div class="progress-bar g-bg-indigo" role="progressbar" style="width: 37%" aria-valuenow="37" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress g-height-20 rounded-0 u-progress g-mb-20">
                      <div class="progress-bar g-bg-red" role="progressbar" style="width: 13%" aria-valuenow="13" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress g-height-20 rounded-0 u-progress g-mb-20">
                      <div class="progress-bar g-bg-lightred" role="progressbar" style="width: 56%" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress g-height-20 rounded-0 u-progress g-mb-20">
                      <div class="progress-bar g-bg-darkred" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress g-height-20 rounded-0 u-progress g-mb-20">
                      <div class="progress-bar g-bg-purple" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress g-height-20 rounded-0 u-progress g-mb-20">
                      <div class="progress-bar g-bg-darkpurple" role="progressbar" style="width: 84%" aria-valuenow="84" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress g-height-20 rounded-0 u-progress g-mb-20">
                      <div class="progress-bar g-bg-pink" role="progressbar" style="width: 99%" aria-valuenow="99" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress g-height-20 rounded-0 u-progress g-mb-20">
                      <div class="progress-bar g-bg-orange" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress g-height-20 rounded-0 u-progress g-mb-20">
                      <div class="progress-bar g-bg-deeporange" role="progressbar" style="width: 64%" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress g-height-20 rounded-0 u-progress g-mb-20">
                      <div class="progress-bar g-bg-yellow" role="progressbar" style="width: 88%" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress g-height-20 rounded-0 u-progress g-mb-20">
                      <div class="progress-bar g-bg-aqua" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress g-height-20 rounded-0 u-progress g-mb-20">
                      <div class="progress-bar g-bg-cyan" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress g-height-20 rounded-0 u-progress g-mb-20">
                      <div class="progress-bar g-bg-teal" role="progressbar" style="width: 77%" aria-valuenow="77" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress g-height-20 rounded-0 u-progress g-mb-20">
                      <div class="progress-bar g-bg-brown" role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress g-height-20 rounded-0 u-progress g-mb-20">
                      <div class="progress-bar g-bg-bluegray" role="progressbar" style="width: 64%" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress g-height-20 rounded-0 u-progress g-mb-20">
                      <div class="progress-bar g-bg-black" role="progressbar" style="width: 81%" aria-valuenow="81" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div>
                </div>

                {% set contentTarget = "#shortcode2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Colored Progress Bars -->

            <hr class="g-brd-gray-light-v4 g-my-60">

            <!-- Rounded Progress Bars -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Rounded Progress Bars</h3>
              </div>

              <div class="col-md-9 g-mb-60">
                <div id="shortcode3">
                  <div class="shortcode-html">
                    <div class="progress g-height-20 g-rounded-3 u-progress g-mb-20">
                      <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress g-height-20 g-rounded-3 u-progress g-mb-20">
                      <div class="progress-bar" role="progressbar" style="width: 42%" aria-valuenow="42" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress g-height-20 g-rounded-3 u-progress g-mb-20">
                      <div class="progress-bar" role="progressbar" style="width: 37%" aria-valuenow="37" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div>
                </div>

                {% set contentTarget = "#shortcode3" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div class="col-md-9 ml-md-auto">
                <div id="shortcode4">
                  <div class="shortcode-html">
                    <div class="progress g-height-20 g-rounded-20 u-progress g-mb-20">
                      <div class="progress-bar" role="progressbar" style="width: 13%" aria-valuenow="13" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress g-height-20 g-rounded-20 u-progress g-mb-20">
                      <div class="progress-bar" role="progressbar" style="width: 56%" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress g-height-20 g-rounded-20 u-progress g-mb-20">
                      <div class="progress-bar" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div>
                </div>

                {% set contentTarget = "#shortcode4" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Rounded Progress Bars -->

            <hr class="g-brd-gray-light-v4 g-my-60">

            <!-- Progress Bars Sizes -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Progress Bars Sizes</h3>
              </div>

              <div class="col-md-9 g-mb-60">
                <div id="shortcode5">
                  <div class="shortcode-html">
                    <div class="progress rounded-0 g-mb-20">
                      <div class="progress-bar u-progress-bar--2xs" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress rounded-0 g-mb-20">
                      <div class="progress-bar u-progress-bar--2xs" role="progressbar" style="width: 42%" aria-valuenow="42" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress rounded-0 g-mb-20">
                      <div class="progress-bar u-progress-bar--2xs" role="progressbar" style="width: 37%" aria-valuenow="37" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div>
                </div>

                {% set contentTarget = "#shortcode5" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div class="col-md-9 ml-md-auto g-mb-60">
                <div id="shortcode6">
                  <div class="shortcode-html">
                    <div class="progress rounded-0 g-mb-20">
                      <div class="progress-bar u-progress-bar--xs" role="progressbar" style="width: 13%" aria-valuenow="13" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress rounded-0 g-mb-20">
                      <div class="progress-bar u-progress-bar--xs" role="progressbar" style="width: 56%" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress rounded-0 g-mb-20">
                      <div class="progress-bar u-progress-bar--xs" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div>
                </div>

                {% set contentTarget = "#shortcode6" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div class="col-md-9 ml-md-auto g-mb-60">
                <div id="shortcode7">
                  <div class="shortcode-html">
                    <div class="progress rounded-0 g-mb-20">
                      <div class="progress-bar u-progress-bar--sm" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress rounded-0 g-mb-20">
                      <div class="progress-bar u-progress-bar--sm" role="progressbar" style="width: 84%" aria-valuenow="84" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress rounded-0 g-mb-20">
                      <div class="progress-bar u-progress-bar--sm" role="progressbar" style="width: 99%" aria-valuenow="99" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div>
                </div>

                {% set contentTarget = "#shortcode7" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div class="col-md-9 ml-md-auto g-mb-60">
                <div id="shortcode8">
                  <div class="shortcode-html">
                    <div class="progress rounded-0 g-mb-20">
                      <div class="progress-bar u-progress-bar--lg" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress rounded-0 g-mb-20">
                      <div class="progress-bar u-progress-bar--lg" role="progressbar" style="width: 64%" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress rounded-0 g-mb-20">
                      <div class="progress-bar u-progress-bar--lg" role="progressbar" style="width: 88%" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div>
                </div>

                {% set contentTarget = "#shortcode8" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div class="col-md-9 ml-md-auto g-mb-60">
                <div id="shortcode9">
                  <div class="shortcode-html">
                    <div class="progress rounded-0 g-mb-20">
                      <div class="progress-bar u-progress-bar--xl" role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress rounded-0 g-mb-20">
                      <div class="progress-bar u-progress-bar--xl" role="progressbar" style="width: 64%" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress rounded-0 g-mb-20">
                      <div class="progress-bar u-progress-bar--xl" role="progressbar" style="width: 81%" aria-valuenow="81" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div>
                </div>

                {% set contentTarget = "#shortcode9" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div class="col-md-9 ml-md-auto">
                <div id="shortcode10">
                  <div class="shortcode-html">
                    <div class="progress rounded-0 g-mb-20">
                      <div class="progress-bar u-progress-bar--2xl" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress rounded-0 g-mb-20">
                      <div class="progress-bar u-progress-bar--2xl" role="progressbar" style="width: 42%" aria-valuenow="42" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress rounded-0 g-mb-20">
                      <div class="progress-bar u-progress-bar--2xl" role="progressbar" style="width: 37%" aria-valuenow="37" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div>
                </div>

                {% set contentTarget = "#shortcode10" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Progress Bars Sizes -->

            <hr class="g-brd-gray-light-v4 g-my-60">

            <!-- Mixed Progress Bars -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Mixed Progress Bars</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode11">
                  <div class="shortcode-html">
                    <div class="progress rounded-0 g-mb-20">
                      <div class="progress-bar g-height-20 g-bg-primary" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                      <div class="progress-bar g-height-20 g-bg-cyan" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress rounded-0 g-mb-20">
                      <div class="progress-bar g-height-20 g-bg-purple" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                      <div class="progress-bar g-height-20 g-bg-blue" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                      <div class="progress-bar g-height-20 g-bg-darkblue" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress rounded-0 g-mb-20">
                      <div class="progress-bar g-height-20 g-bg-red" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                      <div class="progress-bar g-height-20 g-bg-yellow" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                      <div class="progress-bar g-height-20 g-bg-brown" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                      <div class="progress-bar g-height-20 g-bg-pink" role="progressbar" style="width: 27%" aria-valuenow="27" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div>
                </div>

                {% set contentTarget = "#shortcode11" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Mixed Progress Bars -->

            <hr class="g-brd-gray-light-v4 g-my-60">

            <!-- Progress Striped Bars -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Progress Striped Bars</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode12">
                  <div class="shortcode-html">
                    <div class="progress g-mb-20">
                      <div class="progress-bar g-height-20 progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress g-mb-20">
                      <div class="progress-bar g-height-20 progress-bar-striped g-bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress g-mb-20">
                      <div class="progress-bar g-height-20 progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress g-mb-20">
                      <div class="progress-bar g-height-20 progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>

                    <div class="progress g-mb-20">
                      <div class="progress-bar g-height-20 progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div>
                </div>

                {% set contentTarget = "#shortcode12" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Progress Striped Bars -->

            <hr class="g-brd-gray-light-v4 g-my-60">

            <!-- Progress Bars with Animated Stripes -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Progress Bars with Animated Stripes</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode13">
                  <div class="shortcode-html">
                    <div class="progress">
                      <div class="progress-bar g-height-20 progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
                    </div>
                  </div>
                </div>

                {% set contentTarget = "#shortcode13" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Progress Bars with Animated Stripes -->
          </section>
          <!-- End Progress Bars -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Progress Bars. Examples. -->
          <section>
            <!-- Heading -->
            <header class="g-mb-80">
              <div class="u-heading-v6-2  text-uppercase">
                <h2 class="h4 u-heading-v6__title g-font-weight-300">Progress Bars. Examples.</h2>
              </div>

              <div class="g-line-height-2 g-pl-90">
                <p>Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit.</p>
              </div>
            </header>
            <!-- End Heading -->

            <!-- Example 1 -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Example 1</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode14">
                  <div class="shortcode-html">
                    <div class="progress rounded-0 g-mb-20">
                      <div class="progress-bar" role="progressbar" style="width: 22%;" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100">22%</div>
                    </div>

                    <div class="progress rounded-0">
                      <div class="progress-bar" role="progressbar" style="width: 77%;" aria-valuenow="77" aria-valuemin="0" aria-valuemax="100">Sales Strategy –
                        <strong>77%</strong></div>
                    </div>
                  </div>
                </div>

                {% set contentTarget = "#shortcode14" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Example 1 -->

            <hr class="g-brd-gray-light-v4 g-my-60">

            <!-- Example 2 -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Example 2</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode15">
                  <div class="shortcode-html">
                    <h6>Successful of marketing</h6>

                    <div class="progress rounded-0 g-overflow-visible g-mb-20">
                      <div class="progress-bar" role="progressbar" style="width: 87%;" aria-valuenow="87" aria-valuemin="0" aria-valuemax="100">
                        <div class="pull-right g-font-size-11 g-px-5">87%</div>
                      </div>
                    </div>
                  </div>
                </div>

                {% set contentTarget = "#shortcode15" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Example 2 -->

            <hr class="g-brd-gray-light-v4 g-my-60">

            <!-- Example 3 -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Example 3</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode16">
                  <div class="shortcode-html">
                    <h6>Project Completeness
                      <span class="float-right g-ml-10">84%</span>
                    </h6>

                    <div class="progress g-height-20 rounded-0">
                      <div class="progress-bar" role="progressbar" style="width: 84%;" aria-valuenow="84" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div>
                </div>

                {% set contentTarget = "#shortcode16" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Example 3 -->

            <hr class="g-brd-gray-light-v4 g-my-60">

            <!-- Example 4 -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Example 4</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode17">
                  <div class="shortcode-html">
                    <div class="d-table w-100">
                      <div class="d-table-cell g-valign-middle g-width-40 g-pr-15">
                        <span class="u-icon-v3 u-icon--sm g-rounded-50x g-color-white g-bg-primary">
                          <i class="fa fa-user"></i>
                        </span>
                      </div>

                      <div class="d-table-cell g-valign-middle g-color-gray-dark-v2">
                        <span class="d-inline-block g-mb-3">Followers 2,1k</span>

                        <div class="progress rounded-0">
                          <div class="progress-bar u-progress-bar--xs" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                {% set contentTarget = "#shortcode17" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Example 4 -->

            <hr class="g-brd-gray-light-v4 g-my-60">

            <!-- Example 5 -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Example 5</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode18">
                  <div class="shortcode-html">
                    <h6 class="text-uppercase g-font-size-12 g-font-weight-600 g-letter-spacing-0_5 g-pos-rel g-z-index-2">Successful of marketing</h6>

                    <div class="progress g-height-20 rounded-0 g-overflow-visible g-mb-20">
                      <div class="progress-bar g-pos-rel" role="progressbar" style="width: 64%;" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100">
                        <div class="text-center u-progress__pointer-v1 g-font-size-11 g-color-white g-bg-primary g-rounded-50x">64%</div>
                      </div>
                    </div>
                  </div>
                </div>

                {% set contentTarget = "#shortcode18" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Example 5 -->

            <hr class="g-brd-gray-light-v4 g-my-60">

            <!-- Example 6 -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Example 6</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode19">
                  <div class="shortcode-html">
                    <h6 class="text-uppercase g-font-size-12 g-font-weight-600 g-letter-spacing-0_5 g-pos-rel g-z-index-2">Successful of marketing</h6>

                    <div class="progress g-height-20 rounded-0 g-overflow-visible g-mb-20">
                      <div class="progress-bar g-pos-rel" role="progressbar" style="width: 33%;" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100">
                        <div class="text-center u-progress__pointer-v2 g-font-size-11 g-color-white g-bg-primary">33%</div>
                      </div>
                    </div>
                  </div>
                </div>

                {% set contentTarget = "#shortcode19" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Example 6 -->

            <hr class="g-brd-gray-light-v4 g-my-60">

            <!-- Example 7 -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Example 7</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode20">
                  <div class="shortcode-html">
                    <div class="progress rounded-0 g-overflow-visible g-bg-gray-dark-v2 g-pa-3 g-mb-15">
                      <div class="progress-bar u-progress-bar--sm g-pos-rel" role="progressbar" style="width: 56.7069%;" aria-valuenow="8789576" aria-valuemin="0" aria-valuemax="15500000">
                        <div class="text-center u-progress__pointer-v3 g-font-size-11 g-color-white g-bg-primary g-px-5">$ 8 789 576</div>
                      </div>
                    </div>

                    <h6 class="text-uppercase g-font-size-12 g-font-weight-600 g-letter-spacing-0_5">
                      Time left:
                      <span class="g-color-primary">365</span>
                      days
                      <div class="pull-right">Our goal:
                        <span class="g-color-primary">$1 550 0000</span>
                      </div>
                    </h6>
                  </div>
                </div>

                {% set contentTarget = "#shortcode20" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Example 7 -->

            <hr class="g-brd-gray-light-v4 g-my-60">

            <!-- Example 8 -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Example 8</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode21">
                  <div class="shortcode-html">
                    <div class="row">
                      <!-- Vertical Progress Bar -->
                      <div class="col-sm-2 text-center g-mb-20 g-mb-2--sm">
                        <div class="u-progress-bar-vertical-v1 g-bg-gray-light-v4 g-mb-20">
                          <div class="g-bg-primary" style="height: 60%;"></div>
                        </div>

                        <div class="g-font-size-12 g-mb-5">60%</div>

                        <h6 class="text-uppercase g-letter-spacing-1">Design</h6>
                      </div>
                      <!-- End Vertical Progress Bar -->

                      <!-- Vertical Progress Bar -->
                      <div class="col-sm-2 text-center g-mb-20 g-mb-2--sm">
                        <div class="u-progress-bar-vertical-v1 g-bg-gray-light-v4 g-mb-20">
                          <div class="g-bg-primary" style="height: 76%;"></div>
                        </div>

                        <div class="g-font-size-12 g-mb-5">76%</div>

                        <h6 class="text-uppercase g-letter-spacing-1">PHP</h6>
                      </div>
                      <!-- End Vertical Progress Bar -->

                      <!-- Vertical Progress Bar -->
                      <div class="col-sm-2 text-center g-mb-20 g-mb-2--sm">
                        <div class="u-progress-bar-vertical-v1 g-bg-gray-light-v4 g-mb-20">
                          <div class="g-bg-primary" style="height: 92%;"></div>
                        </div>

                        <div class="g-font-size-12 g-mb-5">92%</div>

                        <h6 class="text-uppercase g-letter-spacing-1">HTML</h6>
                      </div>
                      <!-- End Vertical Progress Bar -->

                      <!-- Vertical Progress Bar -->
                      <div class="col-sm-2 text-center g-mb-20 g-mb-2--sm">
                        <div class="u-progress-bar-vertical-v1 g-bg-gray-light-v4 g-mb-20">
                          <div class="g-bg-primary" style="height: 81%;"></div>
                        </div>

                        <div class="g-font-size-12 g-mb-5">81%</div>

                        <h6 class="text-uppercase g-letter-spacing-1">CSS</h6>
                      </div>
                      <!-- End Vertical Progress Bar -->
                    </div>
                  </div>
                </div>

                {% set contentTarget = "#shortcode21" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Example 8 -->
          </section>
          <!-- End Progress Bars. Examples. -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Dynamic Progress Bars -->
          <section>
            <!-- Heading -->
            <header class="g-mb-80">
              <div class="u-heading-v6-2  text-uppercase">
                <h2 class="h4 u-heading-v6__title g-font-weight-300">Dynamic Progress Bars</h2>
              </div>

              <div class="g-line-height-2 g-pl-90">
                <p>Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit.</p>
              </div>
            </header>
            <!-- End Heading -->

            <!-- Example 1 -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Example 1</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode22">
                  <div class="shortcode-html">
                    <div class="js-hr-progress-bar progress g-height-20 rounded-0 g-mb-20">
                      <div class="js-hr-progress-bar-indicator progress-bar g-nowrap" role="progressbar" style="width: 22%;" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100">22%</div>
                    </div>
                  </div>

                  <div class="shortcode-scripts">
                    <!-- JS Implementing Plugins -->
                    <script type="text/plain" src="{{ root }}assets/vendor/appear.js"></script>

                    <!-- JS Plugins Init. -->
                    <script type="text/plain" src="{{ root }}assets/js/components/hs.progress-bar.js"></script>

                    <!-- JS Plugins Init. -->
                    <script type="text/plain">
                      $(document).on('ready', function () {
                        // initialization of horizontal progress bars
                        var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress-bar', {
                          direction: 'horizontal',
                          indicatorSelector: '.js-hr-progress-bar-indicator'
                        });
                      });
                    </script>
                  </div>
                </div>

                {% set contentTarget = "#shortcode22" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Example 1 -->

            <hr class="g-brd-gray-light-v4 g-my-60">

            <!-- Example 2 -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Example 2</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode23">
                  <div class="shortcode-html">
                    <h6>Successful of marketing</h6>

                    <div class="js-hr-progress-bar progress g-height-20 rounded-0 g-overflow-visible g-mb-20">
                      <div class="js-hr-progress-bar-indicator progress-bar" role="progressbar" style="width: 87%;" aria-valuenow="87" aria-valuemin="0" aria-valuemax="100">
                        <div class="pull-right g-font-size-11 g-px-5">87%</div>
                      </div>
                    </div>
                  </div>

                  <div class="shortcode-scripts">
                    <!-- JS Implementing Plugins -->
                    <script type="text/plain" src="{{ root }}assets/vendor/appear.js"></script>

                    <!-- JS Plugins Init. -->
                    <script type="text/plain" src="{{ root }}assets/js/components/hs.progress-bar.js"></script>

                    <!-- JS Plugins Init. -->
                    <script type="text/plain">
                      $(document).on('ready', function () {
                        // initialization of horizontal progress bars
                        var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress-bar', {
                          direction: 'horizontal',
                          indicatorSelector: '.js-hr-progress-bar-indicator'
                        });
                      });
                    </script>
                  </div>
                </div>

                {% set contentTarget = "#shortcode23" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Example 2 -->

            <hr class="g-brd-gray-light-v4 g-my-60">

            <!-- Example 3 -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Example 3</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode24">
                  <div class="shortcode-html">
                    <h6>Project Completeness
                      <span class="float-right g-ml-10">84%</span>
                    </h6>

                    <div class="js-hr-progress-bar progress g-height-20 rounded-0">
                      <div class="js-hr-progress-bar-indicator progress-bar" role="progressbar" style="width: 84%;" aria-valuenow="84" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div>

                  <div class="shortcode-scripts">
                    <!-- JS Implementing Plugins -->
                    <script type="text/plain" src="{{ root }}assets/vendor/appear.js"></script>

                    <!-- JS Plugins Init. -->
                    <script type="text/plain" src="{{ root }}assets/js/components/hs.progress-bar.js"></script>

                    <!-- JS Plugins Init. -->
                    <script type="text/plain">
                      $(document).on('ready', function () {
                        // initialization of horizontal progress bars
                        var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress-bar', {
                          direction: 'horizontal',
                          indicatorSelector: '.js-hr-progress-bar-indicator'
                        });
                      });
                    </script>
                  </div>
                </div>

                {% set contentTarget = "#shortcode24" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Example 3 -->

            <hr class="g-brd-gray-light-v4 g-my-60">

            <!-- Example 4 -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Example 4</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode25">
                  <div class="shortcode-html">
                    <div class="d-table w-100">
                      <div class="d-table-cell g-valign-middle g-width-40 g-pr-15">
                        <span class="u-icon-v3 u-icon--sm g-rounded-50x g-color-white g-bg-primary">
                          <i class="fa fa-user"></i>
                        </span>
                      </div>

                      <div class="d-table-cell g-valign-middle g-color-gray-dark-v2">
                        <span class="d-inline-block g-mb-3">Followers 2,1k</span>

                        <div class="js-hr-progress-bar progress g-height-20 rounded-0">
                          <div class="js-hr-progress-bar-indicator progress-bar u-progress-bar--xs" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="shortcode-scripts">
                    <!-- JS Implementing Plugins -->
                    <script type="text/plain" src="{{ root }}assets/vendor/appear.js"></script>

                    <!-- JS Plugins Init. -->
                    <script type="text/plain" src="{{ root }}assets/js/components/hs.progress-bar.js"></script>

                    <!-- JS Plugins Init. -->
                    <script type="text/plain">
                      $(document).on('ready', function () {
                        // initializtion of horizontal progress bars
                        var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress-bar', {
                          direction: 'horizontal',
                          indicatorSelector: '.js-hr-progress-bar-indicator'
                        });
                      });
                    </script>
                  </div>
                </div>

                {% set contentTarget = "#shortcode25" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Example 4 -->

            <hr class="g-brd-gray-light-v4 g-my-60">

            <!-- Example 5 -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Example 5</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode26">
                  <div class="shortcode-html">
                    <h6 class="text-uppercase g-font-size-12 g-font-weight-600 g-letter-spacing-0_5 g-pos-rel g-z-index-2">Successful of marketing</h6>

                    <div class="js-hr-progress-bar progress g-height-20 rounded-0 g-overflow-visible g-mb-20">
                      <div class="js-hr-progress-bar-indicator progress-bar g-pos-rel" role="progressbar" style="width: 64%;" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100">
                        <div class="text-center u-progress__pointer-v1 g-font-size-11 g-color-white g-bg-primary g-rounded-50x">64%</div>
                      </div>
                    </div>
                  </div>

                  <div class="shortcode-scripts">
                    <!-- JS Implementing Plugins -->
                    <script type="text/plain" src="{{ root }}assets/vendor/appear.js"></script>

                    <!-- JS Plugins Init. -->
                    <script type="text/plain" src="{{ root }}assets/js/components/hs.progress-bar.js"></script>

                    <!-- JS Plugins Init. -->
                    <script type="text/plain">
                      $(document).on('ready', function () {
                        // initialization of horizontal progress bars
                        var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress-bar', {
                          direction: 'horizontal',
                          indicatorSelector: '.js-hr-progress-bar-indicator'
                        });
                      });
                    </script>
                  </div>
                </div>

                {% set contentTarget = "#shortcode26" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Example 5 -->

            <hr class="g-brd-gray-light-v4 g-my-60">

            <!-- Example 6 -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Example 6</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode27">
                  <div class="shortcode-html">
                    <h6 class="text-uppercase g-font-size-12 g-font-weight-600 g-letter-spacing-0_5 g-pos-rel g-z-index-2">Successful of marketing</h6>

                    <div class="js-hr-progress-bar progress g-height-20 rounded-0 g-overflow-visible g-mb-20">
                      <div class="js-hr-progress-bar-indicator progress-bar g-pos-rel" role="progressbar" style="width: 33%;" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100">
                        <div class="text-center u-progress__pointer-v2 g-font-size-11 g-color-white g-bg-primary">33%</div>
                      </div>
                    </div>
                  </div>

                  <div class="shortcode-scripts">
                    <!-- JS Implementing Plugins -->
                    <script type="text/plain" src="{{ root }}assets/vendor/appear.js"></script>

                    <!-- JS Plugins Init. -->
                    <script type="text/plain" src="{{ root }}assets/js/components/hs.progress-bar.js"></script>

                    <!-- JS Plugins Init. -->
                    <script type="text/plain">
                      $(document).on('ready', function () {
                        // initialization of horizontal progress bars
                        var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress-bar', {
                          direction: 'horizontal',
                          indicatorSelector: '.js-hr-progress-bar-indicator'
                        });
                      });
                    </script>
                  </div>
                </div>

                {% set contentTarget = "#shortcode27" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Example 6 -->

            <hr class="g-brd-gray-light-v4 g-my-60">

            <!-- Example 7 -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Example 7</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode28">
                  <div class="shortcode-html">
                    <div class="js-hr-progress-bar progress g-height-20 rounded-0 g-overflow-visible g-bg-gray-dark-v2 g-pa-3 g-mb-15">
                      <div class="js-hr-progress-bar-indicator progress-bar u-progress-bar--sm g-pos-rel" role="progressbar" style="width: 56.7069%;" aria-valuenow="8789576" aria-valuemin="0" aria-valuemax="15500000">
                        <div class="text-center u-progress__pointer-v3 g-font-size-11 g-color-white g-bg-primary g-px-5">$ 8 789 576</div>
                      </div>
                    </div>

                    <h6 class="text-uppercase g-font-size-12 g-font-weight-600 g-letter-spacing-0_5">
                      Time left:
                      <span class="g-color-primary">365</span>
                      days
                      <div class="pull-right">Our goal:
                        <span class="g-color-primary">$1 550 0000</span>
                      </div>
                    </h6>
                  </div>

                  <div class="shortcode-scripts">
                    <!-- JS Implementing Plugins -->
                    <script type="text/plain" src="{{ root }}assets/vendor/appear.js"></script>

                    <!-- JS Plugins Init. -->
                    <script type="text/plain" src="{{ root }}assets/js/components/hs.progress-bar.js"></script>

                    <!-- JS Plugins Init. -->
                    <script type="text/plain">
                      $(document).on('ready', function () {
                        // initialization of horizontal progress bars
                        var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress-bar', {
                          direction: 'horizontal',
                          indicatorSelector: '.js-hr-progress-bar-indicator'
                        });
                      });
                    </script>
                  </div>
                </div>

                {% set contentTarget = "#shortcode28" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Example 7 -->

            <hr class="g-brd-gray-light-v4 g-my-60">

            <!-- Example 8 -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Example 8</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode29">
                  <div class="shortcode-html">
                    <div class="row">
                      <!-- Vertical Progress Bar -->
                      <div class="col-sm-2 text-center g-mb-20 g-mb-2--sm">
                        <div class="js-vr-progress-bar u-progress-bar-vertical-v1 g-bg-gray-light-v4 g-mb-20">
                          <div class="js-vr-progress-bar-indicator g-bg-primary" style="height: 60%;"></div>
                        </div>

                        <div class="g-font-size-12 g-mb-5">60%</div>

                        <h6 class="text-uppercase g-letter-spacing-1">Design</h6>
                      </div>
                      <!-- End Vertical Progress Bar -->

                      <!-- Vertical Progress Bar -->
                      <div class="col-sm-2 text-center g-mb-20 g-mb-2--sm">
                        <div class="js-vr-progress-bar u-progress-bar-vertical-v1 g-bg-gray-light-v4 g-mb-20">
                          <div class="js-vr-progress-bar-indicator g-bg-primary" style="height: 76%;"></div>
                        </div>

                        <div class="g-font-size-12 g-mb-5">76%</div>

                        <h6 class="text-uppercase g-letter-spacing-1">PHP</h6>
                      </div>
                      <!-- End Vertical Progress Bar -->

                      <!-- Vertical Progress Bar -->
                      <div class="col-sm-2 text-center g-mb-20 g-mb-2--sm">
                        <div class="js-vr-progress-bar u-progress-bar-vertical-v1 g-bg-gray-light-v4 g-mb-20">
                          <div class="js-vr-progress-bar-indicator g-bg-primary" style="height: 92%;"></div>
                        </div>

                        <div class="g-font-size-12 g-mb-5">92%</div>

                        <h6 class="text-uppercase g-letter-spacing-1">HTML</h6>
                      </div>
                      <!-- End Vertical Progress Bar -->

                      <!-- Vertical Progress Bar -->
                      <div class="col-sm-2 text-center g-mb-20 g-mb-2--sm">
                        <div class="js-vr-progress-bar u-progress-bar-vertical-v1 g-bg-gray-light-v4 g-mb-20">
                          <div class="js-vr-progress-bar-indicator g-bg-primary" style="height: 81%;"></div>
                        </div>

                        <div class="g-font-size-12 g-mb-5">81%</div>

                        <h6 class="text-uppercase g-letter-spacing-1">CSS</h6>
                      </div>
                      <!-- End Vertical Progress Bar -->
                    </div>
                  </div>

                  <div class="shortcode-scripts">
                    <!-- JS Implementing Plugins -->
                    <script type="text/plain" src="{{ root }}assets/vendor/appear.js"></script>

                    <!-- JS Plugins Init. -->
                    <script type="text/plain" src="{{ root }}assets/js/components/hs.progress-bar.js"></script>

                    <!-- JS Plugins Init. -->
                    <script type="text/plain">
                      $(document).on('ready', function () {
                        // initializtion of vertical progress bars
                        var verticalProgressBars = $.HSCore.components.HSProgressBar.init('.js-vr-progress-bar', {
                          direction: 'vertical',
                          indicatorSelector: '.js-vr-progress-bar-indicator'
                        });
                      });
                    </script>
                  </div>
                </div>

                {% set contentTarget = "#shortcode29" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Example 8 -->
          </section>
          <!-- End Dynamic Progress Bars -->
        </div>
      </div>
    </section>

    {% include "html/assets/include/nunjucks/partials/blocks/cta/cta-main.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/footers/footer-main.njk" %}
    {% include "html/assets/include/nunjucks/partials/blocks/footers/copyright-footer-main.njk" %}
    {% include "html/assets/include/nunjucks/partials/blocks/go-to-top/go-to-top-1.njk" %}
  </main>

  {% include "html/assets/include/nunjucks/partials/blocks/modals/modal-markup.njk" %}

  {% include "html/assets/include/nunjucks/partials/core-js.njk" %}

  <!-- JS Implementing Plugins -->
  <script src="{{ root }}assets/vendor/appear.js"></script>
  <script src="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
  {% include "html/assets/include/nunjucks/partials/js/js-dzsparallaxer.njk" %}

  {% include "html/assets/include/nunjucks/partials/js/js-jquery-ui-core.njk" %}

  <!-- jQuery UI Helpers -->
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/menu.js"></script>
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/mouse.js"></script>

  <!-- jQuery UI Widgets -->
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/autocomplete.js"></script>

  <!-- JS Unify -->
  <script src="{{ root }}assets/js/hs.core.js"></script>

  <script src="{{ root }}assets/js/components/hs.header.js"></script>
  <script src="{{ root }}assets/js/helpers/hs.hamburgers.js"></script>
  <script src="{{ root }}assets/js/components/hs.header-side.js"></script>

  <script src="{{ root }}assets/js/components/hs.progress-bar.js"></script>

  <script src="{{ root }}assets/js/components/hs.autocomplete-local-search.js"></script>
  <script src="{{ root }}assets/style-switcher/vendor/cookiejs/jquery.cookie.js"></script>
  <script src="{{ root }}assets/js/helpers/hs.shortcode-filter.js"></script>

  <script src="{{ root }}assets/js/components/hs.go-to.js"></script>

  {% include "html/assets/include/nunjucks/partials/js/js-show-code.njk" %}

  <!-- JS Custom -->
  <script src="{{ root }}assets/js/custom.js"></script>

  <!-- JS Plugins Init. -->
  <script>
    $(document).on('ready', function () {
      // initialization of go to
      $.HSCore.components.HSGoTo.init('.js-go-to');
    });

    $(window).on('load', function () {
      // initialization of header
      $.HSCore.components.HSHeader.init($('#js-header'));
      $.HSCore.helpers.HSHamburgers.init('.hamburger');
      $.HSCore.components.HSHeaderSide.init($('#sideNav'));

      // initialization of autocomplet
      $.HSCore.components.HSLocalSearchAutocomplete.init('#u-sidebar-navigation__search-autocomplete');

      // initialization of HSMegaMenu plugin
      $('.js-mega-menu').HSMegaMenu({
        event: 'hover',
        pageContainer: $('.container'),
        breakpoint: 991
      });

      // initialization of horizontal progress bars
      var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress-bar', {
        direction: 'horizontal',
        indicatorSelector: '.js-hr-progress-bar-indicator'
      });

      // initializtion of vertical progress bars
      var verticalProgressBars = $.HSCore.components.HSProgressBar.init('.js-vr-progress-bar', {
        direction: 'vertical',
        indicatorSelector: '.js-vr-progress-bar-indicator'
      });
    });
  </script>
</body>
</html>
