Semantic Custom Progress Bar Kit

This Semantic Custom Progress Bar Kit offers a robust way to display data visualization using a “semantic-first” approach. Instead of writing empty div soup, you define your data using standard HTML5 <progress> tags. The accompanying JavaScript then “hydrates” these tags, converting them into four distinct, visually rich styles ranging from simple solids to complex gradients and striped patterns, perfect for dashboards or skill portfolios.

Core Technique

The logic separates data from presentation. The HTML contains only the raw data attributes (max, value, data-title), while JavaScript handles the DOM construction.

The script iterates through all <progress> elements within a target container. It extracts the attributes and generates a new DOM structure. The width of the inner bar is calculated mathematically: (value / max) * 100. This ensures the visual bar is always accurate to the semantic data.

// Extracts data from the semantic tag
const max = progressBar.getAttribute("max");
const value = progressBar.getAttribute("value");

// Calculates visual percentage
const progressValue = Math.round((Number(value) / Number(max)) * 100);

// Applies it to the new visual element
progressBarInner.style.width = `${reformattedProgressValue}%`;

Customization

Each progress bar style is scoped via CSS variables, making them incredibly easy to theme without touching the layout logic.

/* Example 2: Gradient Style */
.example-2__progress {
  --ex2-progress-height: 8px;
  
  /* Define your gradient stops here */
  --ex2-progress-gradient-1: #b465da;
  --ex2-progress-gradient-2: #cf6cc9;
  --ex2-progress-gradient-3: #ee609c;
}

.example-2__progress .progress__bar-inner {
  background-image: linear-gradient(
    to right,
    var(--ex2-progress-gradient-1) 0%,
    var(--ex2-progress-gradient-2) 33%,
    var(--ex2-progress-gradient-3) 66%
  );
}

Tips

1. CSS Stripes Trick: Example 3 creates diagonal stripes without images using a linear-gradient. The key is using transparent stops alongside a color variable.

background-image: linear-gradient(
  45deg,
  transparent 0,
  transparent 25%,
  rgba(0,0,0,0.2) 25%, /* Stripe color */
  rgba(0,0,0,0.2) 50%,
  transparent 50%
  /* ... repeats ... */
);
background-size: 20px 20px; /* Controls stripe thickness */

2. Accessibility Improvement: The current script creates div elements but doesn’t transfer the ARIA roles. To make this fully accessible, update the createProgressBarElem function to add role="progressbar", aria-valuenow, and aria-valuemax.