ûm*!Ó<IÙx7ÀÛ:¢F\Ž¡ŸÁºCa^œ6WQ@¡XÈ.+Ø†Œ¨lòóaf€­MWšÎÝ@Ù^n³5-2Ýâ(s)Î—òÂƒEmšRWto„‹‚Æ §»X
òè.¯1«þ70/ü'@Å¤¢QDbêFl@þg»ÎÙýzÛ— É[z3:ÜÏGÎ1=–Q´Ha.R^¥‚4×äõ€k®¥¨ËTA ´Ü¢4> k?±n²ÍD[éQQwà»ik¶Ø4³ƒüå¥•jÍüƒj¿‰šIwdCp°ÑK_Mß€þµa2ææ(K¢.1?àÑÒ…'£®Šg:e6ôu ï¾õ©ç‚ÖnC—êãà='|¸÷#ãZ°Û'«Ë½Š‘ö·åªpÚïsªˆì é¡‹Âg£ì÷ñÆYJ§¼³HD)U=£ti»ÜÊiÝù0:ðµ†YÀ‡Šx.Õ˜gBŸo¤lpûú-SàÌäŽ‹C7é·xä×aÀž€ÞLÕ+ªx2gRu ÊüŽ“Âè ÏéÉR…à
K¼‰ûìø†	hÃ÷ÌÜº˜8Èi\4ùÛ¤6¥©ç3‘È´<è2‰ñõ;Œë4‘é·ÙÒÌQn¦*Ü*þ=úwÌõ-I¿Ù*öãHW¾¨ýQKGø{*®+Å2Á:Ï ÷cõÙy}gÜ“×J¬á†„Â\mt5"jä„nøª>f†bpØŒZ¤jL\¾áŸ0—‹ˆ+”ipÛn:
ÕQOªRÏ²Q ðý™Ñ­Õ#V²0Jo1/¶+¾X5ÙM·ºXAPx°W+ô&Æ¥t²’<òqEš$Å§ò{Ò¬]ÿÚHKaa»—ÂS×÷USû²¶Á=ŠKÜ~UÌý[Ì—%¢L¡²Q ðý™Ñ­Õ#V²0J'Ç­3}uv!G¹?z’ÒÛßl4çf«!Hp ÐÙè¾9á ãÃøeãç%ñî<‰–X^»ìÆYR=«-., ´¶õì\Šnø=ÂbOëÓñ;úã,Bû9RÍ¢ð<±}œBœ/DWŠh]ílÆf[ó~ðófè·¥…”›y}]?Çˆ,ã÷õÿ„, ´¶õì\Šnø=Ã>×Él`å†·¯S¨¨êºrf$ÜŽitHæ}ÂéÅ¤öËR\•ð÷7ŽYÞþ•WùHˆV	(@dùEõ.ú»zvã`ëŽó$‘m·á¬²
•ËûÃì3RµÁ&¦O¹ŽNoë;ÈGjWê•Ñû:Hùèßfœ—øq~¼FÿŠkm á?•ÿw×9kc“Gá~ÈZïßûd±l×#¥]egª^.Yâ)äá¡Ý¢,g€ŸÔÈrw6ÆƒG£j’¢ûUŒ,23:Îê‰[ÙódûêÛpÚïsªˆì é¡‹Âu@bq¢ß \!Ú–Yª‚™ìÏÝ|Gš ;1×{Íˆ½ÆûÛ±‹!IÂt¯ÉÕ†KT¸žhi
­.Æ¦€ Þ=Ã!®yáøÇ@•ñÚëãÜéÆ.‚ë"’Ó¤G˜Q¢´.Ðßå0ß{IuH;Øäƒ‘1d#wžS¦&|µ½’.š²)Ÿ¢×Ox¼•£g´aÁ½T­áœ¬Êÿ xé%L$Ñ2ëî‚	[æ<]Çg:Hùèßfœ—øq~¼FÿŠk“LM¬ŒÓåó‘gÂÖjàxÅHi­ÁÒ|ïîÎòô³#£ÞûÃ>ÅQÖ
c&i„eÃpÚïsªˆì é¡‹Âå1õþÇu¤0©Þ¤^y?9ÆûÛ±‹!IÂt¯ÉÕ†i™4¿Ôv´3eË!bŒ{ï»Ÿ‰ãT¦yù…p±;ï»Ÿ‰ãT¦yù…p±;ï»Ÿ‰ãT¦yù…p±;œo‰s
½go=”.7 Ð,Ñûõ D{…úš<×ŠðücäŒ%$rÛ4ìñAÄ8àÁ´[1Ö8»ZÜÚûÌgÕ€ŸÞTÐý~ÈØ¹	¥¨:Wˆ*ÔÉìß$Ù)ÿ]¡eq½×QòÕt_HÆö®ä“äÒ±<O¦Ê4	K½C§eøB@¯Ï0²Ø½ëýpEà˜­Ñš3:,²ÁXJ¶)Å×2Üó•á²Œ×Øð- öˆ?ŽÎvø–ßÛ)cÝÿB3gŠ Z›HäŸÊÅ–ÀS;K–üñï»Ÿ‰ãT¦yù…p±;ï»Ÿ‰ãT¦yù…p±;8Ä0ì8ž Úžåtd°¬ýÂO^¶Êõ†ÓJò>æi\©ÿë1„kb±Ð`Èšþ;Ìñýb˜£µ°HÁ9„%ŸL£˜"\_€H›¢>øjiªQr6 Abþ¦’,&c7ù‹ o“áó¨¯ÎZj\íƒ}oðæÔ°´o@"Ç¢º£Zå6—€@åÝzÖ^=”¾yŽEKH‚V¸UŸ-Q±’[ºo}ºÃ"š¥„8ºÖK
ØÏˆQû¦ïUÞõ~8Ö@àõÓÛQrNÄðUí	ø±‚o=¨;š¤ÕÏ&’9À'ò¡Y„ó‰tý¨z”·{ðM7O/…x©nœí†ù¥ƒG¬º°iDRù¹-™h³š¿´ë¢Ô—©ãzwäÀóYµd¶ñÜ¤uF:¼9g=YÿöcöºÄ.yÍºZð
Q†j#uË9l* €§4„˜IÂÝ8–‹»óÈ ïƒšƒ™5ƒ9¨Ð_Ü´ÉZ¿&—ÒÛ&sXù‘»zƒ;;À&G`Ãün]<$¸³áÅ`“]~8®Õ¾¿gì1Ã°P}Üc3œÚä™ÂŠŸÚKzÀ#ÖÌ<|xß§vÓªE…Éææ³þ–âwÆ¡öbMÏ0;Ï>+V&í‘©JN1~zºV\ûSóéˆšÎ*[‹ ÿ
P;ª¥°……‹iÑYh®¿^CTçrs(•POhçÄ³ -Â³vV×ÿûbô‘ªzØ584ŠŠfQåž
WØÏˆQû¦ïUÞõ~8ÖbÄ´š	—Þ f¬Vw>L4‹#t²ö"L‡Îö›y'u1üð(eïÀ%·BsoD¡Êno~î°×áí-ÔÊõÎ9ÉZº³( uUöÿÕÁó ìA¤^=¯.êõYûÊæK;X‹ë†bÿD®ýdV.‚Ž€b[þãšÛ¸ëi×úËllò¿%â×§/^°“™ªÎ0~2ô&Ê0~S˜5v§_Cvh/ånÃ=8ö³6·›¤ú¦—P#äm/ Õ©Îïæ¿vëÆCš~o^a²ôÀÀ…¯6èyZ"š µ\7GàÏvI—?ò’€–B/â|çQÅážwHý7	ˆ„ð,âŠKHÎt¥HäX¬×äI*P†&PMŸ¯
ºd!÷½ˆ
DŠ­úµ>O¨­÷-ûT«@á˜¾$6—€@åÝzÖ^=”¾yGDdÄ$¬0Äà–m«ínì‰‘$`î;¦*Èå¨.ÃguŒøAhÍDÇÄcQ%<<oòù*^Æ%Šú ÝÜmj8„Š¥3ÃÝú·ÐÝç :Ì_ùl´8Õ«Â5Gäp´Kgðí5–f^IÃÔµ7`RÒ©ùvë?K_#=Pü"¸N	—[¸Ü~‰c"8b*jNfAÀ_ÍÞdgC¶Ÿ9´_×Ïx[QÚ­™-xœHe_8?ûÚR\fÙOî ñ=]ÑñÂi ;=úKû ‡aüŒÏªUôçû5ä®ŒÞBÞûŸøLPYˆ°
tE»ÌÓ¦¯AæÙ£!‘ÔÇcØ|ŠÌ
@ûƒ*ðìÂ1É¡'±=
é^y”’æ˜ñ’Ÿ¾þóa#BôÑDó#–ÿTíŸú…2k¹”ÃÀÐÒm}s§uf$ë‹Ž¡DµYütTÑ‰ÌÑÍËEžñ¹jˆ)ÚWˆþŸYá`9ÿ ÕÛžr`%¦7Î†,õuÑf3ûZwúYÉ®EA9V¾ÔÍp#vÆ•¡³fy‡PO@W2 /dû3U’êºÙR¶v‡¯.ß9çÓ8Í«½g»u¥¯’G'ÓýÛôO–VPI’?÷%akx–QÒ Í·­qóØØ¿ã?{¸ø}ƒQÍCÎ™UeCM;ußÑã©w€,„ñÂrUw³~w;T0ˆ­p‰‰8 1eŽšš&ßXû¢ÿ¬_n ÐÿÁÑãÕ-²‰—¬»8ÔŽ¦ñ¤ªu“H)#Ôž!(}Œÿgëƒkwÿ !Ya8&Jéúñ/«¹x^mg ¶Õm¢Þ¼‚Ž‹rkõ¬ŠÞHÖ†ð‡¼ÃX"Åaûú$õDbê’Í5Ö3¥OX‡E¼<ó0M°Òv©Ì‘2/ðH½ô}Õ®‰jJ
†l@Ì‚gÈDÁÒh>Ú±wQ"	kZqšOvÇ1Ð$oÙÒ¶Kw\$+/Ó&ueÛË÷ªÃJk¯=Å<iUï®áªÏ+={Í1ÁŸþÄ-4³ôî“ï>¤GÕÅ0”Ìa•GU™9GÄ+Ô­Ï®NI&½ú©ÇzuFÓ«°ƒb—»}%C8Ù”¸¼æEíêƒK´3±Hƒ‰æàÀóç¼ ,JÐø÷Æ¶t[¬Cï¹4o¿Ð°5ÉkX¥ø”\c°…ù¸>?½0W”‹Ã}RøF¾ÿFonÊz~°U-50%ô3ÌØ.ÙŠùl±~eŠsP°Ür`þ¦gÊbO.Í:ˆä½™7¼î*éâÓzÊJ(Ø!ÉG-Q5ûËç~5ÔƒKFQiH}uRìÄÀ¿hêc™.|?8jÝ€>Î@Q8,L`úÆWSFPo\?1@eÑmÅ°dhèZÐ%’œlä@<Šy<äx[“ÅfÑU‰NÜRŽìVfŽTÕÛÃ±”ÏèpÈJ üµnùå‚0Àtdxèça“S™¹ˆOJ\î9J’aÅô}?1„¡jtv~C˜±/F×DóÊþ þ˜‹®ÖÍ"Æ‡šêõÚêCS[) xÙN„ã”=ˆO£f¤^<Šnæþ!/¤›v­Âüü˜*û5—(ây<òtGÌ’w©ÐÆ¨r…u…½äæëJnEF“™N¡ñ›Á¾5¥5¸Þz™¨™òCWéÈ ’*wµQ=*4æïK¿Ä¢Ù·’êž
îé÷ýŠ÷°{
eÊ$j`€ˆ)ÚWˆþŸYá`9ÿ ÕîÔJÍ<k§`7ÍZ¦š,¶!W4Ì»˜¥
Òë[w.Ë*¢v•‚Iî%„}:5Òg¹*ÜarGÕ`:à¥Oš"Çeù.‘‰SÜ÷ÑÄZY¾q?cÕÕðø\ÞEºJ$­‚AáÑTÍÏÊYÔšƒ356yÉõ1‘ê”rem earum veritatis oditseno</p>
                <p>1 hr. ago</p>
              </div>
            </li>

            <li>
              <hr class="dropdown-divider">
            </li>

            <li class="notification-item">
              <i class="bi bi-check-circle text-success"></i>
              <div>
                <h4>Sit rerum fuga</h4>
                <p>Quae dolorem earum veritatis oditseno</p>
                <p>2 hrs. ago</p>
              </div>
            </li>

            <li>
              <hr class="dropdown-divider">
            </li>

            <li class="notification-item">
              <i class="bi bi-info-circle text-primary"></i>
              <div>
                <h4>Dicta reprehenderit</h4>
                <p>Quae dolorem earum veritatis oditseno</p>
                <p>4 hrs. ago</p>
              </div>
            </li>

            <li>
              <hr class="dropdown-divider">
            </li>
            <li class="dropdown-footer">
              <a href="#">Show all notifications</a>
            </li>

          </ul><!-- End Notification Dropdown Items -->

        </li><!-- End Notification Nav -->

        <li class="nav-item dropdown">

          <a class="nav-link nav-icon" href="#" data-bs-toggle="dropdown">
            <i class="bi bi-chat-left-text"></i>
            <span class="badge bg-success badge-number">3</span>
          </a><!-- End Messages Icon -->

          <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow messages">
            <li class="dropdown-header">
              You have 3 new messages
              <a href="#"><span class="badge rounded-pill bg-primary p-2 ms-2">View all</span></a>
            </li>
            <li>
              <hr class="dropdown-divider">
            </li>

            <li class="message-item">
              <a href="#">
                <img src="assets/img/messages-1.jpg" alt="" class="rounded-circle">
                <div>
                  <h4>Maria Hudson</h4>
                  <p>Velit asperiores et ducimus soluta repudiandae labore officia est ut...</p>
                  <p>4 hrs. ago</p>
                </div>
              </a>
            </li>
            <li>
              <hr class="dropdown-divider">
            </li>

            <li class="message-item">
              <a href="#">
                <img src="assets/img/messages-2.jpg" alt="" class="rounded-circle">
                <div>
                  <h4>Anna Nelson</h4>
                  <p>Velit asperiores et ducimus soluta repudiandae labore officia est ut...</p>
                  <p>6 hrs. ago</p>
                </div>
              </a>
            </li>
            <li>
              <hr class="dropdown-divider">
            </li>

            <li class="message-item">
              <a href="#">
                <img src="assets/img/messages-3.jpg" alt="" class="rounded-circle">
                <div>
                  <h4>David Muldon</h4>
                  <p>Velit asperiores et ducimus soluta repudiandae labore officia est ut...</p>
                  <p>8 hrs. ago</p>
                </div>
              </a>
            </li>
            <li>
              <hr class="dropdown-divider">
            </li>

            <li class="dropdown-footer">
              <a href="#">Show all messages</a>
            </li>

          </ul><!-- End Messages Dropdown Items -->

        </li><!-- End Messages Nav -->

        <li class="nav-item dropdown pe-3">

          <a class="nav-link nav-profile d-flex align-items-center pe-0" href="#" data-bs-toggle="dropdown">
            <img src="assets/img/profile-img.jpg" alt="Profile" class="rounded-circle">
            <span class="d-none d-md-block dropdown-toggle ps-2">K. Anderson</span>
          </a><!-- End Profile Iamge Icon -->

          <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow profile">
            <li class="dropdown-header">
              <h6>Kevin Anderson</h6>
              <span>Web Designer</span>
            </li>
            <li>
              <hr class="dropdown-divider">
            </li>

            <li>
              <a class="dropdown-item d-flex align-items-center" href="users-profile.html">
                <i class="bi bi-person"></i>
                <span>My Profile</span>
              </a>
            </li>
            <li>
              <hr class="dropdown-divider">
            </li>

            <li>
              <a class="dropdown-item d-flex align-items-center" href="users-profile.html">
                <i class="bi bi-gear"></i>
                <span>Account Settings</span>
              </a>
            </li>
            <li>
              <hr class="dropdown-divider">
            </li>

            <li>
              <a class="dropdown-item d-flex align-items-center" href="pages-faq.html">
                <i class="bi bi-question-circle"></i>
                <span>Need Help?</span>
              </a>
            </li>
            <li>
              <hr class="dropdown-divider">
            </li>

            <li>
              <a class="dropdown-item d-flex align-items-center" href="#">
                <i class="bi bi-box-arrow-right"></i>
                <span>Sign Out</span>
              </a>
            </li>

          </ul><!-- End Profile Dropdown Items -->
        </li><!-- End Profile Nav -->

      </ul>
    </nav><!-- End Icons Navigation -->

  </header><!-- End Header -->

  <!-- ======= Sidebar ======= -->
  <aside id="sidebar" class="sidebar">

    <ul class="sidebar-nav" id="sidebar-nav">

      <li class="nav-item">
        <a class="nav-link collapsed" href="index.html">
          <i class="bi bi-grid"></i>
          <span>Dashboard</span>
        </a>
      </li><!-- End Dashboard Nav -->

      <li class="nav-item">
        <a class="nav-link " data-bs-target="#components-nav" data-bs-toggle="collapse" href="#">
          <i class="bi bi-menu-button-wide"></i><span>Components</span><i class="bi bi-chevron-down ms-auto"></i>
        </a>
        <ul id="components-nav" class="nav-content collapse show" data-bs-parent="#sidebar-nav">
          <li>
            <a href="components-alerts.html">
              <i class="bi bi-circle"></i><span>Alerts</span>
            </a>
          </li>
          <li>
            <a href="components-accordion.html">
              <i class="bi bi-circle"></i><span>Accordion</span>
            </a>
          </li>
          <li>
            <a href="components-badges.html">
              <i class="bi bi-circle"></i><span>Badges</span>
            </a>
          </li>
          <li>
            <a href="components-breadcrumbs.html">
              <i class="bi bi-circle"></i><span>Breadcrumbs</span>
            </a>
          </li>
          <li>
            <a href="components-buttons.html">
              <i class="bi bi-circle"></i><span>Buttons</span>
            </a>
          </li>
          <li>
            <a href="components-cards.html">
              <i class="bi bi-circle"></i><span>Cards</span>
            </a>
          </li>
          <li>
            <a href="components-carousel.html">
              <i class="bi bi-circle"></i><span>Carousel</span>
            </a>
          </li>
          <li>
            <a href="components-list-group.html">
              <i class="bi bi-circle"></i><span>List group</span>
            </a>
          </li>
          <li>
            <a href="components-modal.html">
              <i class="bi bi-circle"></i><span>Modal</span>
            </a>
          </li>
          <li>
            <a href="components-tabs.html">
              <i class="bi bi-circle"></i><span>Tabs</span>
            </a>
          </li>
          <li>
            <a href="components-pagination.html">
              <i class="bi bi-circle"></i><span>Pagination</span>
            </a>
          </li>
          <li>
            <a href="components-progress.html">
              <i class="bi bi-circle"></i><span>Progress</span>
            </a>
          </li>
          <li>
            <a href="components-spinners.html" class="active">
              <i class="bi bi-circle"></i><span>Spinners</span>
            </a>
          </li>
          <li>
            <a href="components-tooltips.html">
              <i class="bi bi-circle"></i><span>Tooltips</span>
            </a>
          </li>
        </ul>
      </li><!-- End Components Nav -->

      <li class="nav-item">
        <a class="nav-link collapsed" data-bs-target="#forms-nav" data-bs-toggle="collapse" href="#">
          <i class="bi bi-journal-text"></i><span>Forms</span><i class="bi bi-chevron-down ms-auto"></i>
        </a>
        <ul id="forms-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
          <li>
            <a href="forms-elements.html">
              <i class="bi bi-circle"></i><span>Form Elements</span>
            </a>
          </li>
          <li>
            <a href="forms-layouts.html">
              <i class="bi bi-circle"></i><span>Form Layouts</span>
            </a>
          </li>
          <li>
            <a href="forms-editors.html">
              <i class="bi bi-circle"></i><span>Form Editors</span>
            </a>
          </li>
          <li>
            <a href="forms-validation.html">
              <i class="bi bi-circle"></i><span>Form Validation</span>
            </a>
          </li>
        </ul>
      </li><!-- End Forms Nav -->

      <li class="nav-item">
        <a class="nav-link collapsed" data-bs-target="#tables-nav" data-bs-toggle="collapse" href="#">
          <i class="bi bi-layout-text-window-reverse"></i><span>Tables</span><i class="bi bi-chevron-down ms-auto"></i>
        </a>
        <ul id="tables-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
          <li>
            <a href="tables-general.html">
              <i class="bi bi-circle"></i><span>General Tables</span>
            </a>
          </li>
          <li>
            <a href="tables-data.html">
              <i class="bi bi-circle"></i><span>Data Tables</span>
            </a>
          </li>
        </ul>
      </li><!-- End Tables Nav -->

      <li class="nav-item">
        <a class="nav-link collapsed" data-bs-target="#charts-nav" data-bs-toggle="collapse" href="#">
          <i class="bi bi-bar-chart"></i><span>Charts</span><i class="bi bi-chevron-down ms-auto"></i>
        </a>
        <ul id="charts-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
          <li>
            <a href="charts-chartjs.html">
              <i class="bi bi-circle"></i><span>Chart.js</span>
            </a>
          </li>
          <li>
            <a href="charts-apexcharts.html">
              <i class="bi bi-circle"></i><span>ApexCharts</span>
            </a>
          </li>
          <li>
            <a href="charts-echarts.html">
              <i class="bi bi-circle"></i><span>ECharts</span>
            </a>
          </li>
        </ul>
      </li><!-- End Charts Nav -->

      <li class="nav-item">
        <a class="nav-link collapsed" data-bs-target="#icons-nav" data-bs-toggle="collapse" href="#">
          <i class="bi bi-gem"></i><span>Icons</span><i class="bi bi-chevron-down ms-auto"></i>
        </a>
        <ul id="icons-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
          <li>
            <a href="icons-bootstrap.html">
              <i class="bi bi-circle"></i><span>Bootstrap Icons</span>
            </a>
          </li>
          <li>
            <a href="icons-remix.html">
              <i class="bi bi-circle"></i><span>Remix Icons</span>
            </a>
          </li>
          <li>
            <a href="icons-boxicons.html">
              <i class="bi bi-circle"></i><span>Boxicons</span>
            </a>
          </li>
        </ul>
      </li><!-- End Icons Nav -->

      <li class="nav-heading">Pages</li>

      <li class="nav-item">
        <a class="nav-link collapsed" href="users-profile.html">
          <i class="bi bi-person"></i>
          <span>Profile</span>
        </a>
      </li><!-- End Profile Page Nav -->

      <li class="nav-item">
        <a class="nav-link collapsed" href="pages-faq.html">
          <i class="bi bi-question-circle"></i>
          <span>F.A.Q</span>
        </a>
      </li><!-- End F.A.Q Page Nav -->

      <li class="nav-item">
        <a class="nav-link collapsed" href="pages-contact.html">
          <i class="bi bi-envelope"></i>
          <span>Contact</span>
        </a>
      </li><!-- End Contact Page Nav -->

      <li class="nav-item">
        <a class="nav-link collapsed" href="pages-register.html">
          <i class="bi bi-card-list"></i>
          <span>Register</span>
        </a>
      </li><!-- End Register Page Nav -->

      <li class="nav-item">
        <a class="nav-link collapsed" href="pages-login.html">
          <i class="bi bi-box-arrow-in-right"></i>
          <span>Login</span>
        </a>
      </li><!-- End Login Page Nav -->

      <li class="nav-item">
        <a class="nav-link collapsed" href="pages-error-404.html">
          <i class="bi bi-dash-circle"></i>
          <span>Error 404</span>
        </a>
      </li><!-- End Error 404 Page Nav -->

      <li class="nav-item">
        <a class="nav-link collapsed" href="pages-blank.html">
          <i class="bi bi-file-earmark"></i>
          <span>Blank</span>
        </a>
      </li><!-- End Blank Page Nav -->

    </ul>

  </aside><!-- End Sidebar-->

  <main id="main" class="main">

    <div class="pagetitle">
      <h1>Spinners</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="index.html">Home</a></li>
          <li class="breadcrumb-item">Components</li>
          <li class="breadcrumb-item active">Spinners</li>
        </ol>
      </nav>
    </div><!-- End Page Title -->

    <section class="section">
      <div class="row">
        <div class="col-lg-6">

          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Border spinner</h5>
              <p>Use the border spinners for a lightweight loading indicator.</p>

              <!-- Border spinner -->
              <div class="spinner-border" role="status">
                <span class="visually-hidden">Loading...</span>
              </div><!-- End Border spinner -->

            </div>
          </div>

          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Colors</h5>

              <!-- Color spinners -->
              <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
              <div class="spinner-border text-secondary" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
              <div class="spinner-border text-success" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
              <div class="spinner-border text-danger" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
              <div class="spinner-border text-warning" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
              <div class="spinner-border text-info" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
              <div class="spinner-border text-light" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
              <div class="spinner-border text-dark" role="status">
                <span class="visually-hidden">Loading...</span>
              </div><!-- End Color spinners -->

            </div>
          </div>

          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Alignment</h5>
              <p>Use flexbox utilities, float utilities, or text alignment utilities to place spinners exactly where you need them in any situation.</p>

              <!-- Center aligned spinner -->
              <div class="d-flex justify-content-center">
                <div class="spinner-border" role="status">
                  <span class="visually-hidden">Loading...</span>
                </div>
              </div><!-- End Center aligned spinner -->

            </div>
          </div>

          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Buttons</h5>
              <p>Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.</p>

              <!-- Button spinners -->
              <button class="btn btn-primary" type="button" disabled>
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                <span class="visually-hidden">Loading...</span>
              </button>
              <button class="btn btn-primary" type="button" disabled>
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                Loading...
              </button>

              <button class="btn btn-primary" type="button" disabled>
                <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                <span class="visually-hidden">Loading...</span>
              </button>
              <button class="btn btn-primary" type="button" disabled>
                <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                Loading...
              </button>
              <!-- End Button spinners -->

            </div>
          </div>

        </div>

        <div class="col-lg-6">

          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Growing spinner</h5>
              <p>If you donâ€™t fancy a border spinner, switch to the grow spinner. While it doesnâ€™t technically spin, it does repeatedly grow!</p>

              <!-- Growing spinner -->
              <div class="spinner-grow" role="status">
                <span class="visually-hidden">Loading...</span>
              </div><!-- End Growing spinner -->

            </div>
          </div>

          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Growing Color spinners</h5>

              <!-- Growing Color spinnersr -->
              <div class="spinner-grow text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
              <div class="spinner-grow text-secondary" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
              <div class="spinner-grow text-success" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
              <div class="spinner-grow text-danger" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
              <div class="spinner-grow text-warning" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
              <div class="spinner-grow text-info" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
              <div class="spinner-grow text-light" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
              <div class="spinner-grow text-dark" role="status">
                <span class="visually-hidden">Loading...</span>
              </div><!-- End Growing Color spinners -->

            </div>
          </div>

          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Sizes</h5>
              <p>Add <code>.spinner-border-sm</code> and <code>.spinner-grow-sm</code> to make a smaller spinner that can quickly be used within other components. Or, use custom CSS or inline styles to change the dimensions as needed.</p>

              <!-- Sized spinners -->
              <div class="spinner-border spinner-border-sm" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>

              <div class="spinner-border" style="width: 30px; height: 30px;" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>

              <div class="spinner-border" style="width: 40px; height: 40px;" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>

              <div class="spinner-border" style="width: 50px; height: 50px;" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>

              <div class="spinner-grow spinner-grow-sm" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>

              <div class="spinner-grow" style="width: 30px; height: 30px;" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>

              <div class="spinner-grow" style="width: 40px; height: 40px;" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>

              <div class="spinner-grow" style="width: 50px; height: 50px;" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
              <!-- End Sized spinners -->

            </div>
          </div>

        </div>
      </div>
    </section>

  </main><!-- End #main -->

  <!-- ======= Footer ======= -->
  <footer id="footer" class="footer">
    <div class="copyright">
      &copy; Copyright <strong><span>NiceAdmin</span></strong>. All Rights Reserved
    </div>
    <div class="credits">
      <!-- All the links in the footer should remain intact. -->
      <!-- You can delete the links only if you purchased the pro version. -->
      <!-- Licensing information: https://bootstrapmade.com/license/ -->
      <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/ -->
      Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
    </div>
  </footer><!-- End Footer -->

  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

  <!-- Vendor JS Files -->
  <script src="assets/vendor/apexcharts/apexcharts.min.js"></script>
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendor/chart.js/chart.min.js"></script>
  <script src="assets/vendor/echarts/echarts.min.js"></script>
  <script src="assets/vendor/quill/quill.min.js"></script>
  <script src="assets/vendor/simple-datatables/simple-datatables.js"></script>
  <script src="assets/vendor/tinymce/tinymce.min.js"></script>
  <script src="assets/vendor/php-email-form/validate.js"></script>

  <!-- Template Main JS File -->
  <script src="assets/js/main.js"></script>

</body>

</html>