Dot-check Progress Bar

Dot-check Progress Bar

Go to Source

See the Code
See it Full Page
See Details

The dots are created by using an svg with a background color. Apply a class of .is-complete or .is-current to mark progress on each list-item. A line is drawn between two items when items marked with either class are next to each other.

This Pen uses: HTML, SCSS, JavaScript, and