Remove unnecessary JS for indeterminate progress

This commit is contained in:
Florine W. Dekker 2022-12-14 22:35:48 +01:00
parent 6188437d1f
commit b32c9789a9
No known key found for this signature in database
GPG key ID: D3DCFAA8A4560BE0
2 changed files with 9 additions and 14 deletions

File diff suppressed because one or more lines are too long

View file

@ -1,8 +1,8 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
${require('./_head.html') ${require('./_head.html')
title="Progress" title="Progress"
description="Progress bar element in pure HTML, without JavaScript." description="Progress bar element in pure HTML, without JavaScript."
canonical="progress.html" canonical="progress.html"
} }
@ -10,10 +10,10 @@
<body> <body>
${require('./_nav.html')} ${require('./_nav.html')}
<main class="container" id="docs"> <main class="container" id="docs">
${require('./_sidebar.html') active="progress-link"} ${require('./_sidebar.html') active="progress-link"}
<div role="document"> <div role="document">
<section id="progress"> <section id="progress">
<hgroup> <hgroup>
@ -28,22 +28,19 @@
</footer> </footer>
</article> </article>
<p>You can change a progress bar to an indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p> <p>A progress bar without a <code><b>value</b></code> attribute is indeterminate.</p>
<article aria-label="Indeterminate progress bar example"> <article aria-label="Indeterminate progress bar example">
<progress id="indeterminate-progress"></progress> <progress></progress>
<script>document.getElementById('indeterminate-progress').indeterminate = true;</script>
<footer class="code"> <footer class="code">
<pre><code>&lt;<b>script</b>&gt; <pre><code>&lt;<b>progress</b>&gt;&lt;/<b>progress</b>&gt;</code></pre>
<i>document</i>.<b>getElementById</b>(<u>'indeterminate-progress'</u>).<i>indeterminate</i> = <u>true</u>;
&lt;/<b>script</b>&gt;</code></pre>
</footer> </footer>
</article> </article>
</section> </section>
${require('./_footer.html')} ${require('./_footer.html')}
</div> </div>
</main> </main>
<script src="js/commons.min.js"></script> <script src="js/commons.min.js"></script>