Back to Snippets

Circular Progress Chart CSS

Visualize data with this animated circular chart. We use SVG strokes and CSS offsets to create a progress ring that fills up smoothly, which is perfect for dashboard stats or skill indicators.

405

#css

#chart #progress

#circle

#dashboard #svg #animation

#ui

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

.chart-wrapper {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  display: flex;
  justify-content: center;
  padding: 40px;
}
.chart-card {
  background: white;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  text-align: center;
  width: 250px;
}
.chart-card h3 {
  margin: 0 0 20px 0;
  color: #1f2937;
}
.circle-chart {
  width: 150px;
  height: 150px;
  margin: 0 auto;
}
.circular-chart {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 100%;
}
.circle-bg {
  fill: none;
  stroke: #f3f4f6;
  stroke-width: 3.8;
}
.circle {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}
.circular-chart.blue .circle {
  stroke: #3b82f6;
}
.percentage {
  fill: #1f2937;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 0.5em;
  text-anchor: middle;
}
@keyframes progress {
  0% { stroke-dasharray: 0 100; }
}
.chart-card p {
  color: #6b7280;
  margin-top: 15px;
  font-weight: 500;
}

Circular Progress Chart CSS

Share Code Snippet