<?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-spinners.html.twig */
class __TwigTemplate_09a5efb87fb6f602ec21a9fcff4b99bb 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-spinners.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-spinners.html.twig"));

        $this->parent = $this->loadTemplate("partials/layout-vertical.html.twig", "ui-spinners.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 "Spinners
";
        
        $__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" => "Spinners"]);
        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\">Border Spinner</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use the border spinners for a lightweight loading indicator.</p>

\t\t\t\t\t<div class=\"spinner-border m-2\" role=\"status\">
\t\t\t\t\t\t<span class=\"visually-hidden\">Loading...</span>
\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\">Colors</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">You can use any 
\t\t\t\t\t\t                                                of our text color utilities on the standard spinner.</p>

\t\t\t\t\t<div class=\"spinner-border text-primary m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-border text-secondary m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-border text-success m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-border text-danger m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-border text-warning m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-border text-info m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-border text-pink m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-border text-purple m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-border text-light m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-border text-dark m-2\" role=\"status\"></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\">Alignment</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use flexbox utilities, float utilities, or text alignment utilities to place spinners exactly where you need them in any situation.</p>

\t\t\t\t\t<div class=\"d-flex justify-content-center\">
\t\t\t\t\t\t<div class=\"spinner-border\" role=\"status\"></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\">Size</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Add
\t\t\t\t\t\t<code>.spinner-border-sm</code>
\t\t\t\t\t\tand
\t\t\t\t\t\t<code>.spinner-border.avatar-**</code>
\t\t\t\t\t\tto make a smaller spinner that can quickly be used within other components.</p>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"spinner-border avatar-lg text-primary m-2\" role=\"status\"></div>
\t\t\t\t\t\t\t<div class=\"spinner-grow avatar-lg text-secondary m-2\" role=\"status\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->

\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"spinner-border avatar-md text-primary m-2\" role=\"status\"></div>
\t\t\t\t\t\t\t<div class=\"spinner-grow avatar-md text-secondary m-2\" role=\"status\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->

\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"spinner-border avatar-sm text-primary m-2\" role=\"status\"></div>
\t\t\t\t\t\t\t<div class=\"spinner-grow avatar-sm text-secondary m-2\" role=\"status\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->

\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"spinner-border spinner-border-sm m-2\" role=\"status\"></div>
\t\t\t\t\t\t\t<div class=\"spinner-grow spinner-grow-sm m-2\" role=\"status\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->
\t\t\t\t\t</div>
\t\t\t\t\t<!--end row-->
\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\">Growing Spinner</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!</p>

\t\t\t\t\t<div class=\"spinner-grow m-2\" role=\"status\">
\t\t\t\t\t\t<span class=\"visually-hidden\">Loading...</span>
\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\">Color Growing Spinner</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">You can use any of our text color utilities on the standard spinner.</p>

\t\t\t\t\t<div class=\"spinner-grow text-primary m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-grow text-secondary m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-grow text-success m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-grow text-danger m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-grow text-warning m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-grow text-info m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-grow text-pink m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-grow text-purple m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-grow text-light m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-grow text-dark m-2\" role=\"status\"></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\">Placement</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use
\t\t\t\t\t\t<code>flexbox utilities</code>,
\t\t\t\t\t\t<code>float utilities</code>, or
\t\t\t\t\t\t<code>text alignment</code>
\t\t\t\t\t\tutilities to place spinners exactly where you need them in any situation.</p>

\t\t\t\t\t<div class=\"d-flex align-items-center\">
\t\t\t\t\t\t<strong>Loading...</strong>
\t\t\t\t\t\t<div class=\"spinner-border ms-auto\" role=\"status\" aria-hidden=\"true\"></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\">Buttons Spinner</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use spinners within buttons to indicate an action is currently processing or taking place. 
\t\t\t\t\t\t                                                You may also swap the text out of the spinner element and utilize button text as needed.</p>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t\t\t<button class=\"btn btn-primary\" type=\"button\" disabled>
\t\t\t\t\t\t\t\t\t<span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t\t\t<span class=\"visually-hidden\">Loading...</span>
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t\t<button class=\"btn btn-primary\" type=\"button\" disabled>
\t\t\t\t\t\t\t\t\t<span class=\"spinner-border spinner-border-sm me-1\" role=\"status\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t\t\tLoading...
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->
\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t\t\t<button class=\"btn btn-primary\" type=\"button\" disabled>
\t\t\t\t\t\t\t\t\t<span class=\"spinner-grow spinner-grow-sm\" role=\"status\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t\t\t<span class=\"visually-hidden\">Loading...</span>
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t\t<button class=\"btn btn-primary\" type=\"button\" disabled>
\t\t\t\t\t\t\t\t\t<span class=\"spinner-grow spinner-grow-sm me-1\" role=\"status\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t\t\tLoading...
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end row -->
\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-spinners.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 %}Spinners
{% endblock %}

{% block pagetitle %}
\t{{ include('partials/page-title.html.twig', { sub_title: 'Base UI', page_title: 'Spinners' }) }}
{% 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\">Border Spinner</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use the border spinners for a lightweight loading indicator.</p>

\t\t\t\t\t<div class=\"spinner-border m-2\" role=\"status\">
\t\t\t\t\t\t<span class=\"visually-hidden\">Loading...</span>
\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\">Colors</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">You can use any 
\t\t\t\t\t\t                                                of our text color utilities on the standard spinner.</p>

\t\t\t\t\t<div class=\"spinner-border text-primary m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-border text-secondary m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-border text-success m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-border text-danger m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-border text-warning m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-border text-info m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-border text-pink m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-border text-purple m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-border text-light m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-border text-dark m-2\" role=\"status\"></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\">Alignment</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use flexbox utilities, float utilities, or text alignment utilities to place spinners exactly where you need them in any situation.</p>

\t\t\t\t\t<div class=\"d-flex justify-content-center\">
\t\t\t\t\t\t<div class=\"spinner-border\" role=\"status\"></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\">Size</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Add
\t\t\t\t\t\t<code>.spinner-border-sm</code>
\t\t\t\t\t\tand
\t\t\t\t\t\t<code>.spinner-border.avatar-**</code>
\t\t\t\t\t\tto make a smaller spinner that can quickly be used within other components.</p>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"spinner-border avatar-lg text-primary m-2\" role=\"status\"></div>
\t\t\t\t\t\t\t<div class=\"spinner-grow avatar-lg text-secondary m-2\" role=\"status\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->

\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"spinner-border avatar-md text-primary m-2\" role=\"status\"></div>
\t\t\t\t\t\t\t<div class=\"spinner-grow avatar-md text-secondary m-2\" role=\"status\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->

\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"spinner-border avatar-sm text-primary m-2\" role=\"status\"></div>
\t\t\t\t\t\t\t<div class=\"spinner-grow avatar-sm text-secondary m-2\" role=\"status\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->

\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"spinner-border spinner-border-sm m-2\" role=\"status\"></div>
\t\t\t\t\t\t\t<div class=\"spinner-grow spinner-grow-sm m-2\" role=\"status\"></div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->
\t\t\t\t\t</div>
\t\t\t\t\t<!--end row-->
\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\">Growing Spinner</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!</p>

\t\t\t\t\t<div class=\"spinner-grow m-2\" role=\"status\">
\t\t\t\t\t\t<span class=\"visually-hidden\">Loading...</span>
\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\">Color Growing Spinner</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">You can use any of our text color utilities on the standard spinner.</p>

\t\t\t\t\t<div class=\"spinner-grow text-primary m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-grow text-secondary m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-grow text-success m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-grow text-danger m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-grow text-warning m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-grow text-info m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-grow text-pink m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-grow text-purple m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-grow text-light m-2\" role=\"status\"></div>
\t\t\t\t\t<div class=\"spinner-grow text-dark m-2\" role=\"status\"></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\">Placement</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use
\t\t\t\t\t\t<code>flexbox utilities</code>,
\t\t\t\t\t\t<code>float utilities</code>, or
\t\t\t\t\t\t<code>text alignment</code>
\t\t\t\t\t\tutilities to place spinners exactly where you need them in any situation.</p>

\t\t\t\t\t<div class=\"d-flex align-items-center\">
\t\t\t\t\t\t<strong>Loading...</strong>
\t\t\t\t\t\t<div class=\"spinner-border ms-auto\" role=\"status\" aria-hidden=\"true\"></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\">Buttons Spinner</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use spinners within buttons to indicate an action is currently processing or taking place. 
\t\t\t\t\t\t                                                You may also swap the text out of the spinner element and utilize button text as needed.</p>

\t\t\t\t\t<div class=\"row\">
\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t\t\t<button class=\"btn btn-primary\" type=\"button\" disabled>
\t\t\t\t\t\t\t\t\t<span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t\t\t<span class=\"visually-hidden\">Loading...</span>
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t\t<button class=\"btn btn-primary\" type=\"button\" disabled>
\t\t\t\t\t\t\t\t\t<span class=\"spinner-border spinner-border-sm me-1\" role=\"status\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t\t\tLoading...
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->
\t\t\t\t\t\t<div class=\"col-lg-6\">
\t\t\t\t\t\t\t<div class=\"d-flex flex-wrap gap-2\">
\t\t\t\t\t\t\t\t<button class=\"btn btn-primary\" type=\"button\" disabled>
\t\t\t\t\t\t\t\t\t<span class=\"spinner-grow spinner-grow-sm\" role=\"status\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t\t\t<span class=\"visually-hidden\">Loading...</span>
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t\t<button class=\"btn btn-primary\" type=\"button\" disabled>
\t\t\t\t\t\t\t\t\t<span class=\"spinner-grow spinner-grow-sm me-1\" role=\"status\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t\t\tLoading...
\t\t\t\t\t\t\t\t</button>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<!-- end col -->
\t\t\t\t\t</div>
\t\t\t\t\t<!-- end row -->
\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-spinners.html.twig", "C:\\Users\\4\\Desktop\\Anant\\jidox\\jidox_symfony\\Jidox\\templates\\ui-spinners.html.twig");
    }
}
