Forums

Making my own block - vertical progress bar

Permalink
I am wanting to create a progress thermometer which appears as a big red box then slow diminishes from top to bottom as the goal is achieved. I don't want the standard horizontal progress bar that runs from 0 to 100% as this is about reducing chemicals in a lake so needs to visually show reduction not addition.

Is this hard to achieve as a block? Ideally I would like the client to update this rather than me. I am not a programmer but a front end designer with a good knowledge of html and css and a bit of php.

Like maybe an <hr> that reduces in thickness?
trixiemay
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi trixiemay,

Is the data for the progress bar coming from a third party API or entered manually?

If entered manually, you could create a simple block with an input for a number (integer or float).

The number could be used to set the percentage width of a div and the progress label.

Example:
- user enters the number "57.8" in the block form (saved as "progressLevel")
- in the block view, $progressLevel would set the width of the div and the label
<p class="progressBarLabel"><?php echo $progressLevel; >%</p>
<div class="progressBar" style="width: <?php echo $progressLevel; >%"></div>

- the div would require a height

For styling you could use a border, image background, color background, etc.. The progress bar label could be inside the progress bar - there are all sorts of layout options.

Also, you could use Bootstrap progress bars with your $progressLevel.
http://getbootstrap.com/components/#progress-label...
trixiemay replied on at Permalink Reply
trixiemay
Thanks for your comprehensive reply.

Here is my progress bar:
http://lakerotoruaincentives.nz/concrete5.6.3.3/index.php/progress...

So just the red box moves down as I have a transparent png floated on top.
MrKDilkington replied on at Permalink Reply
MrKDilkington
I like that. I especially like the PNG image used as a mask.

What are you using to drive the level of the progress bar?