https://wiki.impvis.co.uk/index.php?action=history&feed=atom&title=Loading_spinner 2026-05-28T10:47:47Z Revision history for this page on the wiki MediaWiki 1.36.0 https://wiki.impvis.co.uk/index.php?title=Loading_spinner&diff=930&oldid=prev 2021-09-30T14:57:42Z

<p></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en-GB"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 14:57, 30 September 2021</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">Line 1:</td> <td colspan="2" class="diff-lineno">Line 1:</td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">This page is a child of the  [[Loading tools]] page. </del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>The loading spinner component appears as a rotating grey donut with a blue segment. It serves to indicate loading progress. It is useful as a cover while the webpage is being rendered. The benefit of this component over the [https://wiki.impvis.co.uk/index.php/Loading_bar loading bar] component is this component fits into smaller spaces. This component can be called using the &lt;code&gt;iv-loading-spinner&lt;/code&gt; tag.  </div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> </div></td><td colspan="2"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>The loading spinner component appears as a rotating grey donut with a blue segment. It serves to indicate loading progress. It is useful as a cover while the webpage is being rendered. The benefit of this component over the [https://wiki.impvis.co.uk/index.php/Loading_bar loading bar] component is this component fits into smaller spaces. This component can be called using the &lt;code&gt;iv-loading-spinner&lt;/code&gt; tag.</div></td><td colspan="2"></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;div class=&quot;res-img&quot;&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;div class=&quot;res-img&quot;&gt;</div></td></tr> </table>

Cclewley https://wiki.impvis.co.uk/index.php?title=Loading_spinner&diff=772&oldid=prev 2021-09-27T16:07:29Z

<p></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en-GB"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 16:07, 27 September 2021</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l34">Line 34:</td> <td colspan="2" class="diff-lineno">Line 34:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Design choice ==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Design choice ==</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>The blue segment is chosen to fit in the general ImpVis blue while the grey background gives a sense of incomplete or inactive.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>The blue segment is chosen to fit in the general ImpVis blue while the grey background gives a sense of incomplete or inactive.</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[Category:<del style="font-weight: bold; text-decoration: none;">ImpVis Components</del>]]</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[[Category:<ins style="font-weight: bold; text-decoration: none;">Loading Tools</ins>]]</div></td></tr> </table>

Cclewley https://wiki.impvis.co.uk/index.php?title=Loading_spinner&diff=28&oldid=prev 2021-06-28T09:12:14Z

<p>Created page with &quot;This page is a child of the <a href="/index.php?title=Loading_tools&amp;action=edit&amp;redlink=1" class="new" title="Loading tools (page does not exist)">Loading tools</a> page. The loading spinner component appears as a rotating grey donut with a blue segment. It serves to indicate loading progre...&quot;</p> <p><b>New page</b></p><div>This page is a child of the [[Loading tools]] page. <br /> <br /> The loading spinner component appears as a rotating grey donut with a blue segment. It serves to indicate loading progress. It is useful as a cover while the webpage is being rendered. The benefit of this component over the [https://wiki.impvis.co.uk/index.php/Loading_bar loading bar] component is this component fits into smaller spaces. This component can be called using the &lt;code&gt;iv-loading-spinner&lt;/code&gt; tag.<br /> <br /> &lt;div class=&quot;res-img&quot;&gt;<br /> [[File:LoadingSpinner.png]]<br /> &lt;/div&gt;<br /> <br /> == Technical information ==<br /> The &lt;code&gt;iv-loading-spinner&lt;/code&gt; is a non-reactive that takes in a number for adjusting the size of the spinning loading icon.<br /> <br /> === Props ===<br /> <br /> Name: spinnerScaling<br /> <br /> Type: Number<br /> <br /> Default: 1<br /> <br /> Description: The number that adjusts the size of the spinner<br /> <br /> === Usage ===<br /> The size of the spinner can be altered using the spinnerScaling prop.<br /> <br /> &lt;div class=&quot;res-img&quot;&gt;<br /> [[File:LoadingSpinnerSize1.png]]<br /> &lt;/div&gt;<br /> &lt;div class=&quot;res-img&quot;&gt;<br /> [[File:LoadingSpinnerSize2.png]]<br /> &lt;/div&gt;<br /> <br /> &lt;br clear=all&gt;<br /> <br /> == Design choice ==<br /> The blue segment is chosen to fit in the general ImpVis blue while the grey background gives a sense of incomplete or inactive.<br /> [[Category:ImpVis Components]]</div>

Admin