HTML DOM Progress Object

HTMLWeb DevelopmentFront End Technology

<p style="">The DOM Progress Object represent the &lt;progress&gt; element of an HTML document.</p><p>Let us create progress object &minus;</p><h2>Syntax</h2><p>Following is the syntax &minus;</p><pre class="result notranslate">document.createElement(&ldquo;PROGRESS&rdquo;);</pre><h2>Properties</h2><p>Following are the properties of progress object &minus;</p><table class="table table-bordered"><thead><tr><th>Property<br></th><th>Explanation<br></th></tr></thead><tbody><tr><td>max<br></td><td>It returns and alter the value of the max attribute of a progress element in an HTML document.<br></td></tr><tr><td>position<br></td><td>It returns the value of position attribute of a progress element in an HTML document.<br></td></tr><tr><td>labels<br></td><td>It returns a list of progress bar&rsquo;s labels in an HTML document.<br></td></tr><tr><td>value<br></td><td>It returns and alter the content of the value attribute of a progress element in an HTML document.<br></td></tr></tbody></table><h2>Example</h2><p>Let us see an example of progress object &minus;</p><p><a class="demo" href="" rel="nofollow" target="_blank">&nbsp;Live Demo</a></p><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; &nbsp; &nbsp;body{ &nbsp; &nbsp; &nbsp; text-align:center; &nbsp; &nbsp; &nbsp; background-color:#fff; &nbsp; &nbsp; &nbsp; color:#0197F6; &nbsp; &nbsp;} &nbsp; &nbsp;h1{ &nbsp; &nbsp; &nbsp; color:#23CE6B; &nbsp; &nbsp;} &nbsp; &nbsp;.drop-down{ &nbsp; &nbsp; &nbsp; width:35%; &nbsp; &nbsp; &nbsp; border:2px solid #fff; &nbsp; &nbsp; &nbsp; font-weight:bold; &nbsp; &nbsp; &nbsp; padding:8px; &nbsp; &nbsp;} &nbsp; &nbsp;.btn{ &nbsp; &nbsp; &nbsp; background-color:#fff; &nbsp; &nbsp; &nbsp; border:1.5px dashed #0197F6; &nbsp; &nbsp; &nbsp; height:2rem; &nbsp; &nbsp; &nbsp; border-radius:2px; &nbsp; &nbsp; &nbsp; width:60%; &nbsp; &nbsp; &nbsp; margin:2rem auto; &nbsp; &nbsp; &nbsp; display:block; &nbsp; &nbsp; &nbsp; color:#0197F6; &nbsp; &nbsp; &nbsp; outline:none; &nbsp; &nbsp; &nbsp; cursor:pointer; &nbsp; &nbsp;} &nbsp; &nbsp;p{ &nbsp; &nbsp; &nbsp; font-size:1.2rem; &nbsp; &nbsp; &nbsp; background-color:#db133a; &nbsp; &nbsp; &nbsp; color:#fff; &nbsp; &nbsp; &nbsp; padding:8px; &nbsp; &nbsp;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;DOM progress Object Demo&lt;/h1&gt; &lt;button onclick=&quot;createProgress()&quot; class=&quot;btn&quot;&gt;Create a progress object&lt;/button&gt; &lt;script&gt; &nbsp; &nbsp;function createProgress() { &nbsp; &nbsp; &nbsp; var progressElement = document.createElement(&quot;PROGRESS&quot;); &nbsp; &nbsp; &nbsp; progressElement.setAttribute(&quot;value&quot;,&quot;60&quot;); &nbsp; &nbsp; &nbsp; progressElement.setAttribute(&quot;max&quot;,&quot;100&quot;); &nbsp; &nbsp; &nbsp; document.body.appendChild(progressElement); &nbsp; &nbsp;} &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</pre><h2>Output</h2><p>This will produce the following output &minus;</p><p><img src="" class="fr-fic fr-dib" style="width:600px; height:450px;" width="600" height="450"></p><p>Click on &ldquo;<strong>Create a progress object</strong>&rdquo; button to create a progress object.</p><p><img src="" class="fr-fic fr-dib" style="width:600px; height:477px;" width="600" height="477"></p>
Updated on 01-Jul-2020 09:51:24