{"id":4369,"date":"2024-11-13T11:56:38","date_gmt":"2024-11-13T16:56:38","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=4369"},"modified":"2025-04-10T11:00:35","modified_gmt":"2025-04-10T16:00:35","slug":"custom-progress-element-using-anchor-positioning-scroll-driven-animations","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/custom-progress-element-using-anchor-positioning-scroll-driven-animations\/","title":{"rendered":"Custom Progress Element Using Anchor Positioning & Scroll-Driven Animations"},"content":{"rendered":"\n

In a previous article<\/a>, we made a cool CSS-only range slider<\/a> powered by anchor positioning and scroll-driven animations. Using minimal HTML and a few CSS tricks we created something that would have required a lot of JavaScript if we built it 2 years ago.<\/p>\n\n\n\n

In this article, we will do the same with the <progress><\/code> element and try to make it as cool as the range slider above.<\/p>\n\n\n

\n
\n

Article Series<\/h3>\n <\/header>\n
\n
    \n
  1. \n Custom Progress Element Using Anchor Positioning & Scroll-Driven Animations<\/a>\n <\/li>\n
  2. \n Custom progress element using the attr() function<\/a>\n <\/li>\n <\/ol>\n <\/div>\n<\/div>\n\n\n\n

    Enough suspense! Here is a demo of what we are making (it’s animated, so hit Rerun if you missed it).<\/p>\n\n\n\n