Template:Progress/doc

__NOWYSIWYG__

Notes about this doc-template

 * 1) Replace all occurences of &ldquo; ©TriMoon™/Sandbox/⋯ &rdquo; with the actual template name.
 * 2) Because the editor hides some parts and makes it impossible to copy from source;
 * 3) * DON'T forget  to make the end of the documentation has this code:
 * 4) When in main Template namespace:
 * 5) *Remove the leading &ldquo; :User: &rdquo; from the actual template name.
 * 6) *Remove the &ldquo; |ns=User &rdquo; argument from the template-name calls.
 * 7) For the Examples section:
 * 8) * Set &ldquo; templatename-preview &rdquo; to a non-empty value when needed to activate preview presets.
 * 9) * Change the &ldquo; templatename &rdquo; part into the unique name for the template. (See the template self)
 * 10) Remove this section from the actual documentation⋯

Description

 * This template is used to display a colored progress bar.
 * It uses CSS-Grid technology to create the output.

Usage

 * Type parameters anywhere you want it displayed.


 * For best visual use it inside a CSS-Grid container.
 * Eg. one that has a &ldquo;display: grid;&rdquo; declaration in it's CSS-style.

Syntax

 * parameters
 * Where parameters are one or more of the following named-parameters in any order.
 * val:Or the first unnamed parameter.
 * (Required)
 * Defaults to: &ldquo;&rdquo; without the quotes.
 * A string consisting of &ldquo;&lt;current&gt; / &lt;max&gt;&rdquo; without the quotes.
 * s1&rArr;s4:(Optional)
 * Gradient stops
 * s1:Defaults to: 
 * Max percent at which the gradient &ldquo;color0 &rArr; color1&rdquo; will be used.
 * s2:Defaults to: 
 * Max percent at which the gradient &ldquo;color1 &rArr; color2&rdquo; will be used.
 * s3:Defaults to: 
 * Max percent at which the gradient &ldquo;color2 &rArr; color3&rdquo; will be used.
 * s4:Defaults to: 
 * Max percent at which the gradient &ldquo;color3 &rArr; color4&rdquo; will be used.
 * Beyond this percent the gradient &ldquo;color4 &rArr; color5&rdquo; will be used.
 * Beyond this percent the gradient &ldquo;color4 &rArr; color5&rdquo; will be used.

CSS Tweaks

 * You can use one or more of the following named-parameters, in any order, to tweak the CSS values used for generating the output.
 * color:Default = 
 * Sets the color of the text inside the bar.
 * c0&rArr;c6
 * Sets color# for use in gradient display.
 * Defaults are:
 *  color0 = color1 = color2 = color3 = color4 =</div > color5 =</div ></div > color6 =</div ></div > This color is used to fill the remainder of the progress-bar as seen above.</div >
 * border-radius:Default = 
 * The radius of the round corners of the progress bar.
 * margin:Default = 
 * The left margin of the progress bar.

Examples
The output is shown on a green background. 1= xxxxxxxxx xxxxxxxxx 2= xxxxxx xxxxxx