<section class="section docs-section" id="progress">
	<h2 class="section-title">Progress</h2>
	<p class="docs-section-description">
		Progress закрывает загрузку, usage meters и staged progress для операций с понятным состоянием выполнения.
	</p>

	<div class="block">
		<h3 class="block-title">Bars</h3>

		<div class="progress" role="progressbar" aria-label="Build progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="64" style="--progress-value: 64%">
			<div class="progress-header">
				<span>Build</span>
				<span class="progress-value">64%</span>
			</div>
			<div class="progress-track">
				<span class="progress-bar"></span>
			</div>
		</div>
	</div>

	<div class="block">
		<div class="progress progress-warning progress-striped progress-animated" role="progressbar" aria-label="Sync progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="42" style="--progress-value: 42%">
			<div class="progress-header">
				<span>Sync</span>
				<span class="progress-value">42%</span>
			</div>
			<div class="progress-track">
				<span class="progress-bar"></span>
			</div>
		</div>
	</div>

	<div class="block">
		<div class="usage-meter">
			<h3 class="usage-meter-title">
				Storage
				<span class="usage-meter-value">78%</span>
			</h3>
			<div class="progress progress-success" role="progressbar" aria-label="Storage usage" aria-valuemin="0" aria-valuemax="100" aria-valuenow="78" style="--progress-value: 78%">
				<div class="progress-track">
					<span class="progress-bar"></span>
				</div>
			</div>
			<p class="usage-meter-meta">312 GB used from 400 GB limit.</p>
		</div>
	</div>

	<div class="block">
		<div class="progress-stages" aria-label="Deploy stages">
			<span class="progress-stage progress-stage-complete">Queued</span>
			<span class="progress-stage progress-stage-complete">Build</span>
			<span class="progress-stage progress-stage-current">Deploy</span>
			<span class="progress-stage">Verify</span>
		</div>
	</div>

	<div class="block">
		<div class="circle-loader" aria-label="Loading">
			<i class="ph ph-spinner"></i>
			<span>Loading state</span>
		</div>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Progress Bar HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;div class="progress" role="progressbar" aria-label="Build progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="64" style="--progress-value: 64%"&gt;
  &lt;div class="progress-header"&gt;
    &lt;span&gt;Build&lt;/span&gt;
    &lt;span class="progress-value"&gt;64%&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="progress-track"&gt;
    &lt;span class="progress-bar"&gt;&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Usage Meter HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;div class="usage-meter"&gt;
  &lt;h3 class="usage-meter-title"&gt;
    Storage
    &lt;span class="usage-meter-value"&gt;78%&lt;/span&gt;
  &lt;/h3&gt;
  &lt;div class="progress progress-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="78" style="--progress-value: 78%"&gt;
    &lt;div class="progress-track"&gt;
      &lt;span class="progress-bar"&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;p class="usage-meter-meta"&gt;312 GB used from 400 GB limit.&lt;/p&gt;
&lt;/div&gt;</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Staged Progress HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;div class="progress-stages" aria-label="Deploy stages"&gt;
  &lt;span class="progress-stage progress-stage-complete"&gt;Queued&lt;/span&gt;
  &lt;span class="progress-stage progress-stage-complete"&gt;Build&lt;/span&gt;
  &lt;span class="progress-stage progress-stage-current"&gt;Deploy&lt;/span&gt;
  &lt;span class="progress-stage"&gt;Verify&lt;/span&gt;
&lt;/div&gt;</code></pre>
	</div>
</section>