← All elements
<div class="pg"><div class="hd"><b>New laptop</b><em>68%</em></div><div class="bar"><i></i></div><div class="ft"><span>$1,020</span><span>of $1,500</span></div></div>About this card
A savings-goal card with an animated gradient bar, percentage chip and milestone ticks.
How it works
A fill element is set to 68 percent width and starts from zero using an animation with fill-mode both, so the bar grows when the card appears. The chip, labels and amounts are plain text.
Ways to customise it
- Change 68% in both the bar and the chip.
- Edit the gradient colours.
- Disable the animation by removing the keyframes.
Good to know
For a real progress value use the progress element or add role progressbar with aria-valuenow. The motion stops under reduced motion.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.