<?php

use Twig\Environment;
use Twig\Error\LoaderError;
use Twig\Error\RuntimeError;
use Twig\Extension\SandboxExtension;
use Twig\Markup;
use Twig\Sandbox\SecurityError;
use Twig\Sandbox\SecurityNotAllowedTagError;
use Twig\Sandbox\SecurityNotAllowedFilterError;
use Twig\Sandbox\SecurityNotAllowedFunctionError;
use Twig\Source;
use Twig\Template;

/* ui-progress.html.twig */
class __TwigTemplate_3de92cf604b9724e1e82c04497255584 extends Template
{
    private $source;
    private $macros = [];

    public function __construct(Environment $env)
    {
        parent::__construct($env);

        $this->source = $this->getSourceContext();

        $this->blocks = [
            'title' => [$this, 'block_title'],
            'pagetitle' => [$this, 'block_pagetitle'],
            'body' => [$this, 'block_body'],
        ];
    }

    protected function doGetParent(array $context)
    {
        // line 1
        return "partials/layout-vertical.html.twig";
    }

    protected function doDisplay(array $context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "ui-progress.html.twig"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "ui-progress.html.twig"));

        $this->parent = $this->loadTemplate("partials/layout-vertical.html.twig", "ui-progress.html.twig", 1);
        $this->parent->display($context, array_merge($this->blocks, $blocks));
        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

    }

    // line 3
    public function block_title($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));

        echo "Progress
";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 6
    public function block_pagetitle($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "pagetitle"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "pagetitle"));

        // line 7
        echo "\t";
        echo twig_include($this->env, $context, "partials/page-title.html.twig", ["sub_title" => "Base UI", "page_title" => "Progress"]);
        echo "
";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 10
    public function block_body($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));

        // line 11
        echo "\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Examples</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">A progress bar can be used to show a user how far along he/she is in a process.</p>

\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar\" role=\"progressbar\" style=\"width: 25%\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar\" role=\"progressbar\" style=\"width: 50%\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar\" role=\"progressbar\" style=\"width: 75%\" aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress\">
\t\t\t\t\t\t<div class=\"progress-bar\" role=\"progressbar\" style=\"width: 100%\" aria-valuenow=\"100\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Height</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">We only set a
\t\t\t\t\t\t<code>height</code>
\t\t\t\t\t\tvalue on the
\t\t\t\t\t\t<code>.progress</code>, so if you change that value the inner
\t\t\t\t\t\t<code>.progress-bar</code>
\t\t\t\t\t\twill automatically resize accordingly.
\t\t\t\t\t\t                                            Use
\t\t\t\t\t\t<code>.progress-sm</code>,<code>.progress-md</code>,<code>.progress-lg</code>,<code>.progress-xl</code>
\t\t\t\t\t\tclasses.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"progress mb-2\" style=\"height: 1px;\">
\t\t\t\t\t\t<div class=\"progress-bar bg-danger\" role=\"progressbar\" style=\"width: 25%;\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\" style=\"height: 3px;\">
\t\t\t\t\t\t<div class=\"progress-bar\" role=\"progressbar\" style=\"width: 25%; height: 20px;\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2 progress-sm\">
\t\t\t\t\t\t<div class=\"progress-bar bg-success\" role=\"progressbar\" style=\"width: 25%\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2 progress-md\">
\t\t\t\t\t\t<div class=\"progress-bar bg-info\" role=\"progressbar\" style=\"width: 50%\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress progress-lg mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar bg-warning\" role=\"progressbar\" style=\"width: 75%\" aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress progress-xl\">
\t\t\t\t\t\t<div class=\"progress-bar bg-success\" role=\"progressbar\" style=\"width: 38%\" aria-valuenow=\"38\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Multiple bars</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Include multiple progress bars in a progress component if you need.</p>

\t\t\t\t\t<div class=\"progress\">
\t\t\t\t\t\t<div class=\"progress-bar\" role=\"progressbar\" style=\"width: 15%\" aria-valuenow=\"15\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t\t<div class=\"progress-bar bg-success\" role=\"progressbar\" style=\"width: 30%\" aria-valuenow=\"30\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t\t<div class=\"progress-bar bg-info\" role=\"progressbar\" style=\"width: 20%\" aria-valuenow=\"20\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Animated stripes</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">The striped gradient can also be animated. Add
\t\t\t\t\t\t<code>.progress-bar-animated</code>
\t\t\t\t\t\tto
\t\t\t\t\t\t<code>.progress-bar</code>
\t\t\t\t\t\tto animate the stripes right to left via CSS3 animations.</p>

\t\t\t\t\t<div class=\"progress\">
\t\t\t\t\t\t<div class=\"progress-bar progress-bar-striped progress-bar-animated\" role=\"progressbar\" aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 75%\"></div>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Labels</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Add labels to your progress bars by placing text within the
\t\t\t\t\t\t<code>.progress-bar</code>.</p>

\t\t\t\t\t<div class=\"progress\">
\t\t\t\t\t\t<div class=\"progress-bar\" role=\"progressbar\" style=\"width: 25%;\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\">25%</div>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Backgrounds</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use background utility classes to change the appearance of individual progress bars.</p>

\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar bg-success\" role=\"progressbar\" style=\"width: 25%\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar bg-info\" role=\"progressbar\" style=\"width: 50%\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar bg-warning\" role=\"progressbar\" style=\"width: 75%\" aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar bg-danger\" role=\"progressbar\" style=\"width: 100%\" aria-valuenow=\"100\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar bg-pink\" role=\"progressbar\" style=\"width: 85%\" aria-valuenow=\"100\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar bg-purple\" role=\"progressbar\" style=\"width: 75%\" aria-valuenow=\"100\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar bg-dark\" role=\"progressbar\" style=\"width: 65%\" aria-valuenow=\"65\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress\">
\t\t\t\t\t\t<div class=\"progress-bar bg-secondary\" role=\"progressbar\" style=\"width: 50%\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Striped</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Add
\t\t\t\t\t\t<code>.progress-bar-striped</code>
\t\t\t\t\t\tto any
\t\t\t\t\t\t<code>.progress-bar</code>
\t\t\t\t\t\tto apply a stripe via CSS gradient over the progress bar’s background color.</p>

\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar progress-bar-striped\" role=\"progressbar\" style=\"width: 10%\" aria-valuenow=\"10\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar progress-bar-striped bg-success\" role=\"progressbar\" style=\"width: 25%\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar progress-bar-striped bg-info\" role=\"progressbar\" style=\"width: 50%\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar progress-bar-striped bg-warning\" role=\"progressbar\" style=\"width: 75%\" aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar progress-bar-striped bg-danger\" role=\"progressbar\" style=\"width: 85%\" aria-valuenow=\"100\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress\">
\t\t\t\t\t\t<div class=\"progress-bar progress-bar-striped bg-pink\" role=\"progressbar\" style=\"width: 100%\" aria-valuenow=\"100\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    public function getTemplateName()
    {
        return "ui-progress.html.twig";
    }

    public function isTraitable()
    {
        return false;
    }

    public function getDebugInfo()
    {
        return array (  113 => 11,  103 => 10,  90 => 7,  80 => 6,  60 => 3,  37 => 1,);
    }

    public function getSourceContext()
    {
        return new Source("{% extends 'partials/layout-vertical.html.twig' %}

{% block title %}Progress
{% endblock %}

{% block pagetitle %}
\t{{ include('partials/page-title.html.twig', { sub_title: 'Base UI', page_title: 'Progress' }) }}
{% endblock %}

{% block body %}
\t<div class=\"row\">
\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Examples</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">A progress bar can be used to show a user how far along he/she is in a process.</p>

\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar\" role=\"progressbar\" style=\"width: 25%\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar\" role=\"progressbar\" style=\"width: 50%\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar\" role=\"progressbar\" style=\"width: 75%\" aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress\">
\t\t\t\t\t\t<div class=\"progress-bar\" role=\"progressbar\" style=\"width: 100%\" aria-valuenow=\"100\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Height</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">We only set a
\t\t\t\t\t\t<code>height</code>
\t\t\t\t\t\tvalue on the
\t\t\t\t\t\t<code>.progress</code>, so if you change that value the inner
\t\t\t\t\t\t<code>.progress-bar</code>
\t\t\t\t\t\twill automatically resize accordingly.
\t\t\t\t\t\t                                            Use
\t\t\t\t\t\t<code>.progress-sm</code>,<code>.progress-md</code>,<code>.progress-lg</code>,<code>.progress-xl</code>
\t\t\t\t\t\tclasses.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"progress mb-2\" style=\"height: 1px;\">
\t\t\t\t\t\t<div class=\"progress-bar bg-danger\" role=\"progressbar\" style=\"width: 25%;\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\" style=\"height: 3px;\">
\t\t\t\t\t\t<div class=\"progress-bar\" role=\"progressbar\" style=\"width: 25%; height: 20px;\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2 progress-sm\">
\t\t\t\t\t\t<div class=\"progress-bar bg-success\" role=\"progressbar\" style=\"width: 25%\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2 progress-md\">
\t\t\t\t\t\t<div class=\"progress-bar bg-info\" role=\"progressbar\" style=\"width: 50%\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress progress-lg mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar bg-warning\" role=\"progressbar\" style=\"width: 75%\" aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress progress-xl\">
\t\t\t\t\t\t<div class=\"progress-bar bg-success\" role=\"progressbar\" style=\"width: 38%\" aria-valuenow=\"38\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Multiple bars</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Include multiple progress bars in a progress component if you need.</p>

\t\t\t\t\t<div class=\"progress\">
\t\t\t\t\t\t<div class=\"progress-bar\" role=\"progressbar\" style=\"width: 15%\" aria-valuenow=\"15\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t\t<div class=\"progress-bar bg-success\" role=\"progressbar\" style=\"width: 30%\" aria-valuenow=\"30\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t\t<div class=\"progress-bar bg-info\" role=\"progressbar\" style=\"width: 20%\" aria-valuenow=\"20\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Animated stripes</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">The striped gradient can also be animated. Add
\t\t\t\t\t\t<code>.progress-bar-animated</code>
\t\t\t\t\t\tto
\t\t\t\t\t\t<code>.progress-bar</code>
\t\t\t\t\t\tto animate the stripes right to left via CSS3 animations.</p>

\t\t\t\t\t<div class=\"progress\">
\t\t\t\t\t\t<div class=\"progress-bar progress-bar-striped progress-bar-animated\" role=\"progressbar\" aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 75%\"></div>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Labels</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Add labels to your progress bars by placing text within the
\t\t\t\t\t\t<code>.progress-bar</code>.</p>

\t\t\t\t\t<div class=\"progress\">
\t\t\t\t\t\t<div class=\"progress-bar\" role=\"progressbar\" style=\"width: 25%;\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\">25%</div>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Backgrounds</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use background utility classes to change the appearance of individual progress bars.</p>

\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar bg-success\" role=\"progressbar\" style=\"width: 25%\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar bg-info\" role=\"progressbar\" style=\"width: 50%\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar bg-warning\" role=\"progressbar\" style=\"width: 75%\" aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar bg-danger\" role=\"progressbar\" style=\"width: 100%\" aria-valuenow=\"100\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar bg-pink\" role=\"progressbar\" style=\"width: 85%\" aria-valuenow=\"100\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar bg-purple\" role=\"progressbar\" style=\"width: 75%\" aria-valuenow=\"100\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar bg-dark\" role=\"progressbar\" style=\"width: 65%\" aria-valuenow=\"65\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress\">
\t\t\t\t\t\t<div class=\"progress-bar bg-secondary\" role=\"progressbar\" style=\"width: 50%\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Striped</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Add
\t\t\t\t\t\t<code>.progress-bar-striped</code>
\t\t\t\t\t\tto any
\t\t\t\t\t\t<code>.progress-bar</code>
\t\t\t\t\t\tto apply a stripe via CSS gradient over the progress bar’s background color.</p>

\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar progress-bar-striped\" role=\"progressbar\" style=\"width: 10%\" aria-valuenow=\"10\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar progress-bar-striped bg-success\" role=\"progressbar\" style=\"width: 25%\" aria-valuenow=\"25\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar progress-bar-striped bg-info\" role=\"progressbar\" style=\"width: 50%\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar progress-bar-striped bg-warning\" role=\"progressbar\" style=\"width: 75%\" aria-valuenow=\"75\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress mb-2\">
\t\t\t\t\t\t<div class=\"progress-bar progress-bar-striped bg-danger\" role=\"progressbar\" style=\"width: 85%\" aria-valuenow=\"100\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t\t<div class=\"progress\">
\t\t\t\t\t\t<div class=\"progress-bar progress-bar-striped bg-pink\" role=\"progressbar\" style=\"width: 100%\" aria-valuenow=\"100\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->

\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

{% endblock %}
", "ui-progress.html.twig", "C:\\Users\\4\\Desktop\\Anant\\jidox\\jidox_symfony\\Jidox\\templates\\ui-progress.html.twig");
    }
}
