Baby Plant Growth Progress Bar

A vertical CSS progress bar styled as a cute growing plant stem that adds leaves as the numeric value increases.

CC CodesCompiler 📅 April 18, 2026

#javascript#css#progress#growth

Progress bars are typically just flat blue rectangles. By vertically rotating a progress bar, we can animate it as a “growing plant stem”, increasing user excitement!

Linking JS to Height

let growth = 0;

export function waterPlant() {
  growth += 20;
  if(growth > 100) growth = 100;
  
  // Update the visual green bar stem height
  document.getElementById('stem').style.height = `${growth}%`;
  
  // Check if we should pop a leaf!
  if(growth === 40) showLeaf(1);
  if(growth === 80) showLeaf(2);
}

Mash the “Water Plant” button in the Live Demo to see the sprout hit 100% capacity and blossom!