VulpesOS/gaia/shared/style/progress_activity/index.html

<!DOCTYPE html>
<html dir="ltr">
<head>
    <meta charset="utf-8">

    <title>Progress & Activity Indicators</title>
    <meta name="description" content="Providing user with visual feedback that a process is active">

    <link rel="stylesheet" href="../../style/headers.css">
    <link rel="stylesheet" href="../../style/confirm.css">
    <link rel="stylesheet" href="../progress_activity.css">

    <!--
      - These <style> and <script> elements are only used for the example code,
      - they are not needed for the real use case.
      -->
    <style>
      html, body {
        margin: 0;
        padding: 0;
        font-size: 10px;
        background-color: #fff;
      }

      body { background: none; }

      h2.bb-docs {
        font-size: 1.8rem;
        font-family: sans-serif;
        font-weight: 300;
        color: #666;
        margin: 10px 0;
        background-color: #f5f5f5;
        padding: 0.4rem;
        padding-inline-start: 3rem;
        border: solid 1px #e8e8e8;
      }

      form[role="dialog"][data-type="confirm"] {
        position: relative;
        height: 30rem;
      }

      form[role="dialog"][data-type="confirm"] > section {
        overflow: hidden;
      }

      .bb-steps progress[value] {
        width: 25%;
        transform: translateX(100%);
      }
    </style>
    <script>
      window.onload = function(){
        document.getElementById('dir').checked = false;
      };
    </script>
</head>

<body role="application">
  <p dir="ltr">
    <label class="bb-docs">
      <input id="dir" type="checkbox" checked="false"
        onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
      RTL mode
    </label>
  </p>
  <section role="region">
    <h2 class="bb-docs">Spinner</h2>
    <div style="text-align: center">
      <progress></progress>
   </div>

    <h2 class="bb-docs">Activity bar</h2>
    <progress class="pack-activity" value="0" max="100"></progress>

    <h2 class="bb-docs">Progress steps</h2>
    <p class="bb-steps">
      <progress value="2" max="4"></progress>
    </p>

    <h2 class="bb-docs">Progress bar</h2>
    <progress value="80" max="100"></progress>

    <h2 class="bb-docs">Progress + activity bar</h2>
    <progress class="pack-activity" value="80" max="100"></progress>
  </section>

  <h2 class="bb-docs">Progress bar + Confirm BB</h2>
  <form role="dialog" data-type="confirm">
    <section>
      <h1>Name of the action</h1>
      <p style="text-align: center">
        <progress></progress>
      </p>
    </section>
    <menu>
      <button class="full">Cancel</button>
    </menu>
  </form>

  <br/>

  <form role="dialog" data-type="confirm">
    <section>
      <h1>Name of the action</h1>
      <p role="status">
        <span>80%</span>
        <progress value="80" max="100"></progress>
      </p>
    </section>
    <menu>
      <button class="full">Cancel</button>
    </menu>
  </form>

  <br/>

  <form role="dialog" data-type="confirm">
    <section>
      <h1>Name of the action</h1>
      <p role="status">
        <progress class="pack-activity" value="0" max="100"></progress>
      </p>
    </section>
    <menu>
      <button class="full">Cancel</button>
    </menu>
  </form>


  <h2 class="bb-docs">Progress bar in Headers</h2>
  <section role="region">
    <header>
      <a href="#"><span class="icon icon-back">back</span></a>
      <h1>Song title</h1>
    </header>
    <progress value="80" max="100"></progress>
    <header>
      <h2>Subheader text</h2>
    </header>
  </section>

    <section role="region">
    <header>
      <a href="#"><span class="icon icon-back">back</span></a>
      <h1>Song title</h1>
    </header>
    <progress class="pack-activity" value="0" max="100"></progress>
    <header>
      <h2>Subheader text</h2>
    </header>
  </section>
</body>
</html>