Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-22 01:44:25 +04:00
Code Issues Projects Releases Wiki Activity

Release 1.0.0-beta10

Browse Source
This commit is contained in:
codecalm
2022-04-29 23:19:24 +02:00
parent f7e9eb0a91
commit c57a195881
179 changed files with 18404 additions and 10291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

239
demo/docs/progress.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-beta9
* @version 1.0.0-beta10
* @link https://tabler.io
* Copyright 2018-2022 The Tabler Authors
* Copyright 2018-2022 codecalm.net Paweł Kuna
@@ -188,16 +188,16 @@
<div class="dropdown-menu">
<div class="dropdown-menu-columns">
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../empty.html" >
<a class="dropdown-item" href="../empty.html">
Empty page
</a>
<a class="dropdown-item" href="../accordion.html" >
<a class="dropdown-item" href="../accordion.html">
Accordion
</a>
<a class="dropdown-item" href="../blank.html" >
<a class="dropdown-item" href="../blank.html">
Blank page
</a>
<a class="dropdown-item" href="../buttons.html" >
<a class="dropdown-item" href="../buttons.html">
Buttons
</a>
<div class="dropend">
@@ -218,58 +218,64 @@
</a>
</div>
</div>
<a class="dropdown-item" href="../colors.html" >
<a class="dropdown-item" href="../colors.html">
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
<a class="dropdown-item" href="../datatables.html">
Datatables
<span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
</a>
<a class="dropdown-item" href="../dropdowns.html">
Dropdowns
</a>
<a class="dropdown-item" href="../modals.html" >
<a class="dropdown-item" href="../modals.html">
Modals
</a>
<a class="dropdown-item" href="../maps.html" >
<a class="dropdown-item" href="../maps.html">
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
<a class="dropdown-item" href="../map-fullsize.html">
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
<a class="dropdown-item" href="../maps-vector.html">
Vector maps
<span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
</a>
<a class="dropdown-item" href="../navigation.html" >
<a class="dropdown-item" href="../navigation.html">
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
<a class="dropdown-item" href="../charts.html">
Charts
</a>
<a class="dropdown-item" href="../pagination.html" >
<a class="dropdown-item" href="../pagination.html">
<!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
Pagination
</a>
<a class="dropdown-item" href="../placeholder.html" >
<a class="dropdown-item" href="../placeholder.html">
Placeholder
</a>
<a class="dropdown-item" href="../tabs.html" >
<a class="dropdown-item" href="../tabs.html">
Tabs
</a>
<a class="dropdown-item" href="../tables.html" >
<a class="dropdown-item" href="../tables.html">
Tables
</a>
<a class="dropdown-item" href="../carousel.html" >
<a class="dropdown-item" href="../carousel.html">
Carousel
<span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
</a>
<a class="dropdown-item" href="../lists.html" >
<a class="dropdown-item" href="../lists.html">
Lists
</a>
<a class="dropdown-item" href="../typography.html" >
<a class="dropdown-item" href="../typography.html">
Typography
</a>
<a class="dropdown-item" href="../offcanvas.html" >
<a class="dropdown-item" href="../offcanvas.html">
Offcanvas
</a>
<a class="dropdown-item" href="../markdown.html" >
<a class="dropdown-item" href="../markdown.html">
Markdown
</a>
<div class="dropend">
@@ -296,6 +302,8 @@
</div>
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
<!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
Error pages
</a>
<div class="dropdown-menu">
@@ -334,43 +342,53 @@
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../activity.html" >
Activity
</a>
<a class="dropdown-item" href="../gallery.html" >
Gallery
</a>
<a class="dropdown-item" href="../invoice.html" >
Invoice
</a>
<a class="dropdown-item" href="../search-results.html" >
Search results
</a>
<a class="dropdown-item" href="../pricing.html" >
Pricing cards
</a>
<a class="dropdown-item" href="../users.html" >
Users
</a>
<a class="dropdown-item" href="../license.html" >
License
</a>
<a class="dropdown-item" href="../music.html" >
Music
</a>
<a class="dropdown-item" href="../tasks.html" >
Tasks
<span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
</a>
<a class="dropdown-item" href="../uptime.html" >
Uptime monitor
</a>
<a class="dropdown-item" href="../widgets.html" >
Widgets
</a>
<a class="dropdown-item" href="../wizard.html" >
Wizard
</a>
<div class="dropdown-menu-columns">
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../activity.html">
Activity
</a>
<a class="dropdown-item" href="../gallery.html">
Gallery
</a>
<a class="dropdown-item" href="../invoice.html">
Invoice
</a>
<a class="dropdown-item" href="../search-results.html">
Search results
</a>
<a class="dropdown-item" href="../pricing.html">
Pricing cards
</a>
<a class="dropdown-item" href="../faq.html">
FAQ
<span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
</a>
<a class="dropdown-item" href="../users.html">
Users
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../license.html">
License
</a>
<a class="dropdown-item" href="../music.html">
Music
</a>
<a class="dropdown-item" href="../tasks.html">
Tasks
<span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
</a>
<a class="dropdown-item" href="../uptime.html">
Uptime monitor
</a>
<a class="dropdown-item" href="../widgets.html">
Widgets
</a>
<a class="dropdown-item" href="../wizard.html">
Wizard
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
@@ -385,45 +403,46 @@
<div class="dropdown-menu">
<div class="dropdown-menu-columns">
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../layout-horizontal.html" >
<a class="dropdown-item" href="../layout-horizontal.html">
Horizontal
</a>
<a class="dropdown-item" href="../layout-boxed.html" >
<a class="dropdown-item" href="../layout-boxed.html">
Boxed
<span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
</a>
<a class="dropdown-item" href="../layout-vertical.html" >
<a class="dropdown-item" href="../layout-vertical.html">
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
<a class="dropdown-item" href="../layout-vertical-transparent.html">
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
<a class="dropdown-item" href="../layout-vertical-right.html">
Right vertical
</a>
<a class="dropdown-item" href="../layout-condensed.html" >
<a class="dropdown-item" href="../layout-condensed.html">
Condensed
</a>
<a class="dropdown-item" href="../layout-combo.html" >
<a class="dropdown-item" href="../layout-combo.html">
Combined
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../layout-navbar-dark.html" >
<a class="dropdown-item" href="../layout-navbar-dark.html">
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
<a class="dropdown-item" href="../layout-navbar-sticky.html">
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
<a class="dropdown-item" href="../layout-navbar-overlap.html">
Navbar overlap
</a>
<a class="dropdown-item" href="../layout-rtl.html" >
<a class="dropdown-item" href="../layout-rtl.html">
RTL mode
</a>
<a class="dropdown-item" href="../layout-fluid.html" >
<a class="dropdown-item" href="../layout-fluid.html">
Fluid
</a>
<a class="dropdown-item" href="../layout-fluid-vertical.html" >
<a class="dropdown-item" href="../layout-fluid-vertical.html">
Fluid vertical
</a>
</div>
@@ -436,29 +455,35 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
</span>
<span class="nav-link-title">
1518 icons
1960 icons
</span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-text -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
</span>
<span class="nav-link-title">
Help
</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="../docs/index.html">
Documentation
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../changelog.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-plus -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="12" y1="11" x2="12" y2="17" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
</span>
<span class="nav-link-title">
</a>
<a class="dropdown-item" href="../changelog.html">
Changelog
</span>
</a>
</a>
<a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
Source code
</a>
<a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
Sponsor project!
</a>
</div>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -480,7 +505,7 @@
<div class="container-xl">
<!-- Page title -->
<div class="page-header d-print-none">
<div class="row align-items-center">
<div class="row g-2 align-items-center">
<div class="col">
<h2 class="page-title">
Documentation
@@ -798,7 +823,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta9</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta10</span>
</a>
</li>
</ul>
@@ -825,7 +850,7 @@
<div class="example no_toc_section">
<div class="example-content">
<div class="progress">
<div class="progress-bar" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100" aria-label="38% Complete">
<span class="visually-hidden">38% Complete</span>
</div>
</div>
@@ -834,7 +859,7 @@
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar"</span> <span class="na">style=</span><span class="s">"width: 38%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"38"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar"</span> <span class="na">style=</span><span class="s">"width: 38%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"38"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span> <span class="na">aria-label=</span><span class="s">"38% Complete"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"visually-hidden"</span><span class="nt">&gt;</span>38% Complete<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
@@ -845,7 +870,7 @@
<div class="example no_toc_section">
<div class="example-content">
<div class="progress progress-sm">
<div class="progress-bar" style="width: 57%" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 57%" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" aria-label="57% Complete">
<span class="visually-hidden">57% Complete</span>
</div>
</div>
@@ -854,7 +879,7 @@
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress progress-sm"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar"</span> <span class="na">style=</span><span class="s">"width: 57%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"57"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar"</span> <span class="na">style=</span><span class="s">"width: 57%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"57"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span> <span class="na">aria-label=</span><span class="s">"57% Complete"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"visually-hidden"</span><span class="nt">&gt;</span>57% Complete<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
@@ -865,7 +890,7 @@
<div class="example no_toc_section">
<div class="example-content">
<div class="progress">
<div class="progress-bar" style="width: 75%" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 75%" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-label="75% Complete">
<span class="visually-hidden">75% Complete</span>
</div>
</div>
@@ -874,7 +899,7 @@
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar"</span> <span class="na">style=</span><span class="s">"width: 75%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"75"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar"</span> <span class="na">style=</span><span class="s">"width: 75%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"75"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span> <span class="na">aria-label=</span><span class="s">"75% Complete"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"visually-hidden"</span><span class="nt">&gt;</span>75% Complete<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
@@ -913,22 +938,22 @@
<div class="example no_toc_section">
<div class="example-content">
<div class="progress progress-sm mb-2">
<div class="progress-bar bg-red" style="width: 24%" role="progressbar" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-red" style="width: 24%" role="progressbar" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100" aria-label="24% Complete">
<span class="visually-hidden">24% Complete</span>
</div>
</div>
<div class="progress progress-sm mb-2">
<div class="progress-bar bg-green" style="width: 45%" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-green" style="width: 45%" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" aria-label="45% Complete">
<span class="visually-hidden">45% Complete</span>
</div>
</div>
<div class="progress progress-sm mb-2">
<div class="progress-bar bg-purple" style="width: 64%" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-purple" style="width: 64%" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="64% Complete">
<span class="visually-hidden">64% Complete</span>
</div>
</div>
<div class="progress progress-sm">
<div class="progress-bar bg-pink" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar bg-pink" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100" aria-label="38% Complete">
<span class="visually-hidden">38% Complete</span>
</div>
</div>
@@ -937,22 +962,22 @@
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress progress-sm mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-red"</span> <span class="na">style=</span><span class="s">"width: 24%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"24"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-red"</span> <span class="na">style=</span><span class="s">"width: 24%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"24"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span> <span class="na">aria-label=</span><span class="s">"24% Complete"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"visually-hidden"</span><span class="nt">&gt;</span>24% Complete<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress progress-sm mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-green"</span> <span class="na">style=</span><span class="s">"width: 45%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"45"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-green"</span> <span class="na">style=</span><span class="s">"width: 45%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"45"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span> <span class="na">aria-label=</span><span class="s">"45% Complete"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"visually-hidden"</span><span class="nt">&gt;</span>45% Complete<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress progress-sm mb-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-purple"</span> <span class="na">style=</span><span class="s">"width: 64%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"64"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-purple"</span> <span class="na">style=</span><span class="s">"width: 64%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"64"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span> <span class="na">aria-label=</span><span class="s">"64% Complete"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"visually-hidden"</span><span class="nt">&gt;</span>64% Complete<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress progress-sm"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-pink"</span> <span class="na">style=</span><span class="s">"width: 38%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"38"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar bg-pink"</span> <span class="na">style=</span><span class="s">"width: 38%"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"38"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span> <span class="na">aria-label=</span><span class="s">"38% Complete"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"visually-hidden"</span><span class="nt">&gt;</span>38% Complete<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
@@ -991,7 +1016,7 @@
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta9
v1.0.0-beta10
</a>
</li>
</ul>
@@ -1003,7 +1028,7 @@
</div>
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
<script src="../dist/js/tabler.min.js" defer></script>
<script src="../dist/js/demo.min.js" defer></script>
</body>
</html>