I would like to add next plugin to Ikiwiki. It's `progressbar` or simply `progress`.
I'm not sure what plugin name better is, probably that shorter ;) I know that
[DokuWiki](http://wiki.splitbrain.org/plugin:progressbar) has similar plugin,
so I think it can be useful also for Ikiwiki users.

Here is proposition of the plugin syntax:

    \[[!progress done=50]]

Of course, `done` argument is integer from 0 to 100. 

A here is its HTML result:

    <div class="progress">
      <div class="progress-done" style="width: 50%">50%</div>
    </div>

Note: I was trying with `<span>` tags too, but that tag is inline, so I can't
set `width` property for it.

> In the poll plugin, I ended up using a `<hr>` for the progress-like
> thing. One reason I did so is because it actually works in text-mode
> browsers (w3m, lynx), that do not support css or colorized
> divs. Since the hr is an element they display, just setting its width can
> make a basic progress-type display. The style then makes it display
> better in more capable browsers.
> 
> The other advantage to that approach is that the htmlscrubber lets
> through the `class` and `width` fields, that are all that are needed for
> it to work. No need to work around htmlscrubber.
> 
> So I suggest adapting this to use similar html. --[[Joey]]

>> I just had a brief play with this.  It seems there are some trade-offs involved.
>> The `width` attribute of an `<hr>` tag is deprecated, but that's not the big one.
>> I can't see how to place text next to an `<hr>` tag.  I note that in the
>> [[plugins/poll]] plugin there is text above and below the 'graph line', but none
>> on the same line as the graph.  I prefer the way the current code renders,
>> with the percentage complete appearing as text inside the graph.
>>
>> So, if we use `hr` we get:
>>
>> - Graph line on text / non-css browsers
>> - No percentage complete text on the same line as the graph line
>> - Deprecated HTML
>>
>> If we use `div` we get:
>>
>> - Need to clean up after HTMLScrubber (which is not hard - already implemented)
>> - Get the percentage written as text on text / non-css browsers
>> - Get the percentage on the same line as the graph in css browsers
>>
>> I'm strongly in favour of having the percentage text label on the graph, and on
>> text based browsers I think having the text label is enough -- the lack of the line
>> in that case doesn't bother me.
>> So, given the choice between the two suggested techniques, I'd take the second and
>> stay with div... unless you know how to get text next to (or within) an `<hr>` tag. -- [[Will]]

Default CSS styles for the plugin can be like below:

    div.progress {
            border: 1px solid #ddd;
            /* border: 2px solid #ddd; */
            width: 200px;
            background: #fff;
            padding: 2px;
            /* padding: 0px; */
            border: 2px solid #aaa;
            background: #eee;
    }
    div.progress-done {
            height: 14px;
            background: #ff6600;
            font-size: 12px;
            text-align: center;
            vertical-align: middle;
    }

You can use alternative, commented CSS code for `div.progress` if you dislike
padding around done strip.

Any comments? --[[Paweł|ptecza]]

> Please make sure to always set a foreground color if a background color is
> set, and use '!important' so the foreground color can be overridden. (CSS
> best practices) --[[Joey]]

>> Below is the CSS I've been using -- [[Will]]

    div.progress {
    	margin-top: 1ex;
    	margin-bottom: 1ex;
    	border: 1px solid #888;
    	width: 400px;
    	background: #eee;
    	color: black !important;
    	padding: 1px;
    }
    div.progress-done {
    	background: #ea6 !important;
    	color: black !important;
    	text-align: center;
    	padding: 1px;
    }

> This looks like a nice idea.  If I could add one further suggestion: Allow your
> ratio to be a pair of pagespecs.  Then you could have something like:

    \[[!progress totalpages="bugs/* and backlink(milestoneB)" donepages="bugs/* and backlink(milestoneB) and !link(bugs/done)"]]

> to have a progress bar marking how many bugs were compete for a
> particular milestone.  -- [[Will]]

>> Thanks a lot for your comment, Will! It seems very interesting for me.
>> I need to think more about improving that plugin. --[[Paweł|ptecza]]

>> Attached is a [[patch]] (well, source) for this.  You also need to add the proposed CSS above to `style.css`.
>> At the moment this plugin interacts poorly with the [[plugins/htmlscrubber]] plugin.
>> HTMLScrubber plugin removes the `style` attribute from the `progress-done` `div` tag, and so it defaults
>> to a width of 100%. -- [[Will]]

>>> Thank you for the code! I know how to fix that problem, because I had
>>> the same issue while writing [[todo/color_plugin]] :) --[[Paweł|ptecza]]

>>>> Ahh - good idea.  Patch updated to work with HTMLScrubber. --[[Will]]

>>>>> I like it, but I think that Joey should take a look at that patch too :)
>>>>> --[[Paweł|ptecza]]

>>>>>> Reviewed, looks excellent, added. [[done]] --[[Joey]]