Progress Indicators with Pseudo-Elements

Progress Indicators

Pseudo-elements can create loading bars, step indicators, and progress rings without extra HTML or JavaScript.

Example

/* CSS-only progress bar */
.progress {
  position: relative;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
}

.progress::before {
  content: "";
  position: absolute;
  height: 100%;
  width: var(--progress, 0%); /* Controlled via JS: el.style.setProperty("--progress", "65%") */
  background: #007bff;
  border-radius: 4px;
  transition: width 0.3s ease;
}

CSS

Full Editor

Pro Tip

Use CSS custom properties with ::before to create animated progress bars controllable entirely from JavaScript.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned