Making my own block - vertical progress bar
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?
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.
- 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.
Here is my progress bar:
So just the red box moves down as I have a transparent png floated on top.
What are you using to drive the level of the progress bar?