Member Avatar for Jon_7

I have a chart for my fundraising goal, but I'd like to make it more minimal by removing the percentage number and placing the 4 items immediately below the table into the table itself. I'd still like for the % to be able to be manually set (perhaps a data tag?), but I'd like for the green background fill to be behind the words.

Here's my Fiddle: http://jsfiddle.net/jonsan32/xh734aej/7/

Any help would be great. Thanks!

Google searching came up with these two possibilities: Tinted Image & Semi-transparency

Edited by Jon_7 because: Added google results
  • 3 Contributors
  • 3 Replies
  • 331 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Jon_7

Dani AI

Generated

A succinct, robust pattern for this task is to keep the percent value in the markup (a data- attribute), render a single “fill” layer behind the labels, and use a CSS custom property (or a tiny bit of JS) to set the fill width. This keeps the percent easily editable in HTML (as requested by ), avoids using tables for layout (as hinted), and is more predictable than trying to tint the cell background with multiple backgrounds (the background-size trick noted by works, but the pseudo-element/fill-layer approach is simpler to reason about and to animate).

Example (minimal):

<div class="goal" data-pct="62" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="62" style="--pct:62%;">
  <div class="goal__fill" aria-hidden="true"></div>
  <div class="goal__labels">
    <span>VENUES</span><span>PLAYERS</span><span>SUPPORTERS</span><span>SPONSORS</span>
  </div>
</div>

<style>
.goal{position:relative;height:44px;background:#eee;border-radius:4px;overflow:hidden;}
.goal__fill{position:absolute;inset:0 auto 0 0;width:var(--pct,0%);background:#27ae60;transition:width .35s;}
.goal__labels{position:relative;z-index:1;display:flex;justify-content:space-around;align-items:center;height:100%;padding:0 8px;font-weight:700;}
</style>

Notes and quick troubleshooting

  • Keep .goal position:relative and .goal__fill absolute so the fill sits behind the text.
  • Use style="--pct:NN%" or set --pct from data-pct with a tiny script to support older browsers; setting aria-valuenow keeps it accessible.
  • If label legibility over both filled and unfilled areas is required, either give each label a semi-opaque pill background (simple), or use a short JS check to flip label color based on whether its center falls inside the fill width (more precise).
  • Prefer semantic div/ul markup instead of tables unless the content is truly tabular data.

Recommended Answers

All 3 Replies

Member Avatar for wazztech

some ideas:
note the background-size of td.percent.

Member Avatar for jkon

Hello Jon_7 ,
I didn't quite understood what you want to do different than what you already do. The one thing that I got was “but I'd like for the green background fill to be behind the words”. The background fill is already behind the percentage text.
Is what you want to have the fields “VENUES” “PLAYERS” e.t.c inside the bar? Does each field has the same amount of percentage that must cover? Where the percentage going to be after that? Above the bar , bellow , somewhere else? Why are you using tables?

commented: Didin't make any sense to me either +14
Member Avatar for Jon_7

This works for me. I wants to update the number in the HTML, but it's just the same to update that number in the CSS... just as long as I keep the CSS exposed and easily accessible.

Here's my finished copy:

Much appreciated.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.