Skip to main content
CSS-Tricks
Since 2007
  • Articles
  • Guides
  • Almanac
  • Links
  • Picks
  • Newsletter
  • Search

Articles Tagged
progress

5 Articles
{
,

}
Direct link to the article Some Innocent Fun With HTML Video and Progress
progress requestAnimationFrame video

Some Innocent Fun With HTML Video and Progress

The idea came while watching a mandatory training video on bullying in the workplace. I can just hear High School Geoff LOL-ing about a wimp like me have to watch that thing.

But here we are.

The video UI was …

Geoff Graham on Apr 30, 2020
Direct link to the article Animating Progress
css animation progress

Animating Progress

Jonathan Snook on the complexity of animating the <progress> element. If you’re unfamiliar, that’s the element that spits out a bar chart-like visual that indicates a position between two values:

This example has custom styles, but you get the point.…
Robin Rendle on Apr 30, 2018
Direct link to the article Animated SVG Radial Progress Bars
loader progress SVG

Animated SVG Radial Progress Bars

Dave Rupert shows us all how to animate radial progress bars in SVG with a tiny script alongside the stroke-dasharray and stroke-dashoffset properties:

For a client project we tasked ourselves with building out one of those cool radial progress bars.

…
Robin Rendle on Apr 3, 2018
Direct link to the article Building a Progress Ring, Quickly
graph loader progress

Building a Progress Ring, Quickly

On some particularly heavy sites, the user needs to see a visual cue temporarily to indicate that resources and assets are still loading before they taking in a finished site. There are different kinds of approaches to solving for this …

Jeremias Menichelli on Oct 9, 2017
Direct link to the article The HTML5 progress Element
HTML 5 progress

The HTML5 progress Element

The following is a guest post by Pankaj Parashar. Pankaj wrote to me about some pretty cool styled progress elements he created. I asked if he’d be interested in fleshing out the idea into an article about styling them …

Pankaj Parashar on Aug 28, 2013

CSS-Tricks is powered by DigitalOcean.

Get Curated Front-End Roundups Right in Your Inbox

Coming back really, really soon! See past issues →

CSS-Tricks
  • About the site
  • Contact us
  • Write for CSS-Tricks!
  • Advertising
  • RSS Feeds
Social
  • Bluesky
  • Mastodon
  • CodePen
  • X / Twitter
  • LinkedIn
Legalese
  • CSS-Tricks License
  • AI Statement
Back to Top