Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • DigitalOcean
  • DO Community
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 …

Avatar of Geoff Graham
Geoff Graham on Apr 30, 2020 (Updated on Aug 20, 2021)
Direct link to the article Animating Progress
css animation progress

Animating Progress

Direct Link

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.…
Avatar of Robin Rendle
Shared by Robin Rendle on Apr 30, 2018
Direct link to the article Animated SVG Radial Progress Bars
loader progress SVG

Animated SVG Radial Progress Bars

Direct Link

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.

…
Avatar of Robin Rendle
Shared by Robin Rendle on Apr 3, 2018
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 …

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

Avatar of Pankaj Parashar
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
  • DigitalOcean
  • DigitalOcean Community
  • About DigitalOcean
  • Legal
  • Agency Coaching
  • Free Credit Offer
CSS-Tricks
  • Email
  • Guest Writing
  • Book
  • Advertising
Follow
  • Mastodon
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top