| 1 | <!doctype html>
|
| 2 | <html lang="en">
|
| 3 | <head>
|
| 4 | ${require('./_head.html')
|
| 5 | title="Loading"
|
| 6 | description="aria-busy='true' enable a loading indicator."
|
| 7 | canonical="loading.html"
|
| 8 | }
|
| 9 | </head>
|
| 10 |
|
| 11 | <body>
|
| 12 | ${require('./_nav.html')}
|
| 13 |
|
| 14 | <main class="container" id="docs">
|
| 15 | ${require('./_sidebar.html') active="loading-link"}
|
| 16 |
|
| 17 | <div role="document">
|
| 18 | <section id="loading">
|
| 19 | <hgroup>
|
| 20 | <h1>Loading</h1>
|
| 21 | <h2><code><i>aria-busy</i>=<u>"true"</u></code> enable a loading indicator.</h2>
|
| 22 | </hgroup>
|
| 23 | <article aria-label="Loading buttons example">
|
| 24 | <button aria-busy="true">Please wait…</button>
|
| 25 | <button aria-busy="true" class="secondary"></button>
|
| 26 | <footer class="code">
|
| 27 |
|
| 28 | <pre><code><<b>button</b> <i>aria-busy</i>=<u>"true"</u>>Please wait…</<b>button</b>>
|
| 29 | <<b>button</b> <i>aria-busy</i>=<u>"true"</u> <i>class</i>=<u>"secondary"</u>></<b>button</b>></code></pre>
|
| 30 |
|
| 31 | </footer>
|
| 32 | </article>
|
| 33 | <p>It can be applied to any block:</p>
|
| 34 | <article aria-busy="true"></article>
|
| 35 | <pre><code><<b>article</b> <i>aria-busy</i>=<u>"true"</u>></<b>article</b>></code></pre>
|
| 36 | <p>Or any text element:</p>
|
| 37 | <article aria-label="Loading paragraph example">
|
| 38 | <a href="#" aria-busy="true" onclick="event.preventDefault()">Generating link, please wait…</a>
|
| 39 | <footer class="code">
|
| 40 | <pre><code><<b>a</b> <i>href</i>=<u>"#"</u> <i>aria-busy</i>=<u>"true"</u>>Generating link, please wait…</<b>a</b>></code></pre>
|
| 41 | </footer>
|
| 42 | </article>
|
| 43 | </section>
|
| 44 |
|
| 45 | ${require('./_footer.html')}
|
| 46 |
|
| 47 | </div>
|
| 48 | </main>
|
| 49 | <script src="js/commons.min.js"></script>
|
| 50 | </body>
|
| 51 | </html>
|