<commit_before>---
title: Barra de Progresso
description: Exibe o status de um processo
---

<div class="row">

  <h2>Utilizando a tag <i>progress</i></h2>

  <table class="ls-table">
    <thead>
      <tr>
        <th>tipo</th><th>Classe</th><th>Exemplo</th>
      </tr>
    </thead>
    <tr>
      <td>Estática</td>
      <td>.ls-progress</td>
      <td><progress class="ls-progress" value="10" max="100"></progress></td>
    </tr>
    <tr>
      <td>Animada</td>
      <td>.ls-progress .ls-progress-animated</td>
      <td><progress class="ls-progress ls-progress-animated" value="20" max="100"></progress></td>
    </tr>
    <tr>
      <td>Cinza</td>
      <td>ls-progress ls-progress-gray</td>
      <td><progress class="ls-progress ls-progress-gray" value="30" max="100"></progress></td>
    </tr>
    <tr>
      <td>Com percentual</td>
      <td>.ls-progress .ls-progress-percent</td>
      <td><progress class="ls-progress ls-progress-percent" value="40" max="100"></progress></td>
    </tr>
    <tr>
      <td>Pie</td>
      <td>.ls-progress .ls-progress-pie</td>
      <td><progress class="ls-progress ls-progress-pie" value="40" max="100"></progress></td>
    </tr>
    <tr>
      <td>donut</td>
      <td>.ls-progress .ls-progress-donut</td>
      <td><progress class="ls-progress ls-progress-donut" value="40" max="100"></progress></td>
    </tr>
  </table>

  <h3>Código</h3>

  <code class="language-html ls-well-example">
    <!-- Estática -->
    <progress class="ls-progress" value="10" max="100"></progress>

    <!-- Animada -->
    <progress class="ls-progress ls-progress-animated" value="20" max="100"></progress>

    <!-- Cinza -->
    <progress class="ls-progress ls-progress-gray" value="30" max="100"></progress>

    <!-- Com números -->
    <progress class="ls-progress ls-progress-percent" value="40" max="100"></progress>
  </code>



</div><commit_msg>progress bar markup demo change<commit_after>---
title: Barra de Progresso
description: Exibe o status de um processo
---

<div class="row">

  <h2>Utilizando a tag <i>progress</i></h2>

  <table class="ls-table">
    <thead>
      <tr>
        <th>tipo</th><th>Classe</th><th>Exemplo</th>
      </tr>
    </thead>
    <tr>
      <td>Estática</td>
      <td>.ls-progress</td>
      <td><progress class="ls-progress" value="10" max="100"></progress></td>
    </tr>
    <tr>
      <td>Animada</td>
      <td>.ls-progress .ls-progress-animated</td>
      <td><progress class="ls-progress ls-progress-animated" value="20" max="100"></progress></td>
    </tr>
    <tr>
      <td>Cinza</td>
      <td>ls-progress ls-progress-gray</td>
      <td><progress class="ls-progress ls-progress-gray" value="30" max="100"></progress></td>
    </tr>
    <tr>
      <td>Com percentual</td>
      <td>.ls-progress .ls-progress-percent</td>
      <td><progress class="ls-progress ls-progress-percent" value="40" max="100"></progress></td>
    </tr>
    <tr>
      <td>Pie</td>
      <td>.ls-progress .ls-progress-pie</td>
      <td><progress class="ls-progress ls-progress-pie" value="40" max="100"></progress></td>
    </tr>
    <tr>
      <td>donut</td>
      <td>.ls-progress .ls-progress-donut</td>
      <td><progress class="ls-progress ls-progress-donut" value="40" max="100"></progress></td>
    </tr>
  </table>

  <h3>Código</h3>

  <div class="doc-example doc-example-markup">
    <!-- Estática -->
    <progress class="ls-progress" value="10" max="100"></progress>
    <br>
    <!-- Animada -->
    <progress class="ls-progress ls-progress-animated" value="20" max="100"></progress>
    <br>

    <!-- Cinza -->
    <progress class="ls-progress ls-progress-gray" value="30" max="100"></progress>
    <br>

    <!-- Com números -->
    <progress class="ls-progress ls-progress-percent" value="40" max="100"></progress>
  </div>



</div>
{'fraction_non_alphanumeric': 0.22082349855756622, 'fraction_numerical': 0.02832415420928403, 'mean_word_length': 2.8642350557244174, 'pattern_counts': {'":': 0, '<': 194, '<?xml version=': 0, '>': 194, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6880836', 'n_tokens_mistral': 1461, 'n_tokens_neox': 1361, 'n_words': 236}