Back to Snippets

Animated Bar Chart CSS

Seven bars for the days of a week rise from the baseline one after another when the page loads. Hover a bar and its value appears above it, and the gridlines behind the bars give the eye something to read the heights against.

The data is a definition list. Each dt is a day label and each dd is a bar whose height comes from a custom property set inline as a percentage, so the numbers stay in the markup where a template can write them and the CSS does the drawing. The bars grow through a scaleY transform with transform-origin at the bottom, and a per-bar delay through another custom property produces the stagger. The value label is a pseudo-element reading the data attribute with attr, and the gridlines are a repeating gradient on the chart background rather than extra elements.

The list markup keeps every label paired with its bar, and the chart works without JavaScript.

#css

#html

#bar chart

#chart

#data visualization

#animation

#dashboard

Run /HTML *CSS ()JS Output Console0 Live Updates Focus

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  background: #f1f5f9;
  color: #0f172a;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.chart {
  width: 100%;
  max-width: 560px;
  background: #ffffff;
  padding: 28px 28px 24px;
  border-radius: 20px;
  box-shadow: 0 20px 40px -20px rgba(15, 23, 42, 0.25);
}

.chart header {
  margin-bottom: 40px;
}

.chart h1 {
  font-size: 1.25rem;
  margin: 0 0 4px;
}

.chart p {
  margin: 0;
  font-size: 0.875rem;
  color: #64748b;
}

.bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 220px auto;
  grid-auto-flow: column;
  column-gap: 14px;
  row-gap: 10px;
  margin: 0;
  background-image: repeating-linear-gradient(to top, #e2e8f0 0 1px, transparent 1px 55px);
  background-size: 100% 220px;
  background-repeat: no-repeat;
}

.bars dt {
  grid-row: 2;
  text-align: center;
  font-size: 0.8125rem;
  color: #64748b;
}

.bars dd {
  grid-row: 1;
  align-self: end;
  position: relative;
  margin: 0;
  height: var(--value);
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, #60a5fa, #2563eb);
  transform-origin: bottom;
  animation: grow 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i) * 90ms);
  transition: filter 0.15s ease;
}

.bars dd:hover {
  filter: brightness(1.1);
}

.bars dd::after {
  content: attr(data-value);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  background: #0f172a;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}

.bars dd:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@keyframes grow {
  from { transform: scaleY(0); }
}

Animated Bar Chart CSS

Share Code Snippet