Skip to main content
CSS-Tricks
  • Articles
  • Notes
  • Links
  • Guides
  • Almanac
  • Picks
  • Shuffle
Search

Articles Tagged
progress

5 Articles
{
,

}
Image
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 …

Image
Geoff Graham on Apr 30, 2020 Updated on Aug 20, 2021
Image
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.…
Image
Robin Rendle on Apr 30, 2018
Image
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.

…
Image
Robin Rendle on Apr 3, 2018
Image
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 …

Image
Jeremias Menichelli on Oct 9, 2017 Updated on Nov 16, 2019
Image
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 …

Image
Pankaj Parashar on Aug 28, 2013 Updated on Nov 24, 2016

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Contact
  • Write for CSS-Tricks!
  • Advertise with us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • Bluesky
Back to Top
Advertisement