Simply put <progress=70> in any page, where # is a number from 0 to 100 without the % sign. (Only multiples of 10 are supported, so you can only use 0%, 10%, 20%, etc.)

<progress=0>

will make an empty progress bar.

<progress=70>

will make a 70% full one.

http://popcorn-os.sourceforge.net/wiki/doku.php?id=playground:progress-bars

Extract the following archive to lib/plugins/.

• .tar.bz2

Here's the source code, but you still need the images from the above archive.
lib/plugins/progressbar/syntax.php:

<?php
/*/DokuWiki_2
 * DokuWiki progress bar plugin
 * Copyright (C) 2006 Mike Smith
 * 
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 * 
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 */
 
if(!defined('DOKU_INC')) define('DOKU_INC',realpath(dirname(__FILE__).'/../../').'/');
if(!defined('DOKU_PLUGIN')) define('DOKU_PLUGIN',DOKU_INC.'lib/plugins/');
require_once(DOKU_PLUGIN.'syntax.php');
 
class syntax_plugin_progressbar extends DokuWiki_Syntax_Plugin
{
 
	/**
	 * return some info
	 */
	function getInfo()
	{
		return array
		(
			'author' => 'Mike Smith',
			'email'  => 'mmiikkee13@gmail.com',
			'date'   => 'whatever today is...',
			'name'   => 'Progress Bar',
			'desc'   => 'Makes progress bars on wiki pages.',
			'url'	=> 'http://popcorn-os.sourceforge.net',
		);
	}
 
	/**
	 * What kind of syntax are we?
	 */
	function getType()
	{
		return 'substition';
	}
 
	/**
	 * Where to sort in?
	 */ 
	function getSort()
	{
		return 999;
	}
 
 
	/**
	 * Connect pattern to lexer
	 */
	function connectTo($mode)
	{
		$this->Lexer->addSpecialPattern('<progress=(?:10|[1-9]?)0>', $mode, 'plugin_progressbar');
	}
 
	/**
	 * Handle the match
	 */
	function handle($match, $state, $pos, &$handler)
	{
		substr($match, 10, -1);
		return array(substr($match, 10, -1));
	}
 
	/**
	 * Create output
	 */
	function render($mode, &$renderer, $data)
	{
		$renderer->doc .= '<img src="'.dirname($_SERVER['PHP_SELF']).'/lib/plugins/progressbar/images/' . $data[0] . '.gif" alt="' . $data[0] . '% completed"/>';
		return true;
	}
}

You can change the images in lib/plugins/progressbar/images. I tried to make them fit in well with the default DokuWiki style, but they probably look horrible with any other style

The 0 state (0%, empty progress bar) doesn't work in the plugin (even on your demo site). I changed the regexp in syntax.php (connectTo() function) from this ”'<progress=(?:10|[1-9])0>'” to this ”'<progress=(?:10|[1-9]?)0>'” (added the ? after [1-9] to make it optional) and now it works. - GJH 2007-01-15

Hi, just stumbled over your cute little plugin - STRONGLY Suggest to add the width and height tag to the img tag to allow the browser to display the wiki pages without the need to wait for loading the progress bar image - eth at gmx punkt at 2007-02-14

This plugin does not work in namespaces if you have doku configured to use '/' – syntax.php line 84 needs modified to provide an absolute web path to the images, because relitive path wont work if your in /somenamespace/somepage. dirname($_SERVER['PHP_SELF']) seems to work for me.

Both bugs have been corrected in this version. Please include it in the mainstream and notify me. Thanks.

The .tar.gz link won't install in the plugin manager. - dinolinux [at] gmail [dot] com 2007-05-18

I've made a tar.bz2 version and stuck it on the server where the demo was running. Updated the link above. However I'm not developing this anymore, therefore the other enhancements here weren't added to it.

Since the archive no longer exists you no longer can access the images in the zip files, however, that example site is still up and running so you can rip the images off of there. But if that links dies, you'll have to copy the source code above to syntax.php inside of the folder, progressbar. Next, you'll create an images directory inside of the progressbar directory. You'll need 11 images–one for each possible percentage. Ex: progressbar/images/100.gif. However, if you don't want to do the hassle of eleven images, and you don't need the images to be disgustingly different you could simply use the variable $data[0] to indicate an image width. And use the same image for every percentage. However, 0% wouldn't be very useful, nor would it indicate the progress percent/value without viewing the alt text. Why deal with images? The following code will replace the $renderer→doc …. line in syntax.php. It produces just about the same results as the images.

    $renderer->doc .= '<table cellpadding="0" cellspacing="0" style="border: 2px solid #436976; width: 100px;"><tr style="height:12px;">'.($data[0]<=0 ? '' : '<td style="background-color:#74a6c9; width: '.$data[0].'%">&nbsp;</td>') . ($data[0]>=100 ? '' : '<td style="background-color: #dee7ec;">&nbsp;</td>') .'</tr></table>';

Want to throw some text in there? Use this ugly solution¹⁾:

  $renderer->doc .= '<table cellspacing="0" style="width: 120px;border: 1px solid #000;">
  <tr><td   style="padding-top: 2px; padding-left: 5px; padding-right: 5px;" colspan="2">
  '.$data[0].'% completed</td></tr>
  <tr><td style="width:'.($data[0]==0 ? '1' : $data[0]).'%; background-color:#f33;">&nbsp;</td>
  <td>&nbsp;</td></tr></table>';

Furthermore, if you opt to not use the images any more then you shouldn't really limit yourself to only 11 different percentages. The following function replaces functino connectTo($mode) inside of syntax.php. The regular expression means accept one or two characters from 0-9 or 100

/**
* Connect pattern to lexer
*/
function connectTo($mode)
{
  $this->Lexer->addSpecialPattern('<progress=(?:[0-9]{1,2}|100?)>', $mode, 'plugin_progressbar');
}

This version creates a progress bar without the images. It will also be inserted inline into your text if you want one that does not wrap to a new line. It's also thinner.

Features:

• No extra images needed. (uses one transparent image that already exists in the Wiki image directory).
• 100 pixels wide.
• Renders inline with your text.
• Thinner.
• Supports any integer percent from 0-100.
• Shows the percent value on mouse-over.

How To Use:

-Update the connectTo function inside syntax.php as per below to make it support any number from 0-100.

/**
* Connect pattern to lexer
*/
function connectTo($mode)
{
  $this->Lexer->addSpecialPattern('<progress=(?:[0-9]{1,2}|100?)>', $mode, 'plugin_progressbar');
}

-Replace the render function in your syntax.php file for this plugin, with this:

function render($mode, &$renderer, $data)
	{
		if($data[0]<0){$data[0]=0;}
		if($data[0]>100){$data[0]=100;}
		$sizeLeft = 100-$data[0];
 
		$renderer->doc .= '<span style="padding:0;height:8px;width: 100px;">'.($data[0]<=0 ? '' : '<span style="margin:0;padding:0;background-color:#74a6c9; height:8px; width:'.$data[0].'"><img src="'.dirname($_SERVER['PHP_SELF']).'lib/images/blank.gif" height="8" width="'.$data[0].'" border="0" title="'.$data[0].'%" alt="'.$data[0].'%" hspace="0" vspace="0" style="" /></span>') . ($data[0]>=100 ? '' : '<span style="margin:0;padding:0;background-color: #dee7ec;height:8px;width:'.$sizeLeft.'"><img src="'.dirname($_SERVER['PHP_SELF']).'lib/images/blank.gif" height="8" width="'.$sizeLeft.'" border="0" title="'.$data[0].'%" alt="'.$data[0].'%" hspace="0" vspace="0" style="" /></span>') .'</span>';
 
		return true;
	}

-Code supplied by Sherri W. (start.ofitall.com).