<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>
                    <GnProgress label="Build" :value="64" />
                  </div>
                  <div class="block">
                    <GnProgress label="Sync" :value="42" variant="warning" animated />
                  </div>
                  <div class="block">
                    <GnUsageMeter title="Storage" :value="78" meta="312 GB used from 400 GB limit." />
                  </div>
                  <div class="block">
                    <GnProgressStages :items="stages" />
                  </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="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></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="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></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="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></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>