This is part of a WIP overhaul for the Elkarte profile page on the Xydre theme, but I wanted to share my code in case anyone else wants to implement a progress bar like this:
![](http://i.imgur.com/ZSp8xEb.png)
Here's the snippet, database code and HTML (The HTML isn't pretty - it's quite fragmented at this point in the function):
/* TODO: Move this to addon */
$db = database();
$request = $db->query('', '
SELECT mg.group_name, mg.min_posts
FROM {db_prefix}membergroups AS mg
WHERE mg.min_posts = (
SELECT MAX(mg.min_posts)
FROM {db_prefix}membergroups AS mg
WHERE mg.min_posts < {raw:min_posts})
OR mg.min_posts = (
SELECT MIN(mg.min_posts)
FROM {db_prefix}membergroups AS mg
WHERE mg.min_posts > {raw:min_posts})
ORDER BY mg.min_posts ASC',
array(
'min_posts' => $context['member']['posts'],
)
);
$min_row = $db->fetch_assoc($request);
$max_row = $db->fetch_assoc($request);
/*print_r($min_row);
print_r($max_row);*/
$percentage_progress = $context['member']['posts'] / ($max_row['min_posts'] - $min_row['min_posts']) * 100;
echo '
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="panel">
<div class="clearfix">
<div class="left text-left">', $min_row['group_name'], '<br />', $min_row['min_posts'], '</div>
<div class="right text-right">', $max_row['group_name'], '<br />', $max_row['min_posts'], '</div>
</div>
<div class="progress">
<div class="meter" style="width: ', $percentage_progress, '%"></div>
</div>
</div>
</div>';