{"id":269130,"date":"2018-04-03T14:20:09","date_gmt":"2018-04-03T21:20:09","guid":{"rendered":"http:\/\/css-tricks.com\/?p=269130"},"modified":"2018-04-03T14:20:09","modified_gmt":"2018-04-03T21:20:09","slug":"animated-svg-radial-progress-bars","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/animated-svg-radial-progress-bars\/","title":{"rendered":"Animated SVG Radial Progress Bars"},"content":{"rendered":"

Dave Rupert shows us all how to animate radial progress bars in SVG with a tiny script alongside the stroke-dasharray<\/code> and stroke-dashoffset<\/code> properties:<\/p>\n

\n

For a client project we tasked ourselves with building out one of those cool radial progress bars. In the past, we\u2019ve used entire Canvas-based charting libraries (156k\/44k gzip), but that seemed like overkill. I looked at Airbnb\u2019s Lottie project where you export After Effects animations as JSON. This is cool for complex animations, but the dependencies seemed heavy (248k\/56k gzip) for one micro-animation.<\/p>\n

Per the usual, I tried my hand at a minimal custom SVG with CSS animation and a small bit of JavaScript (~223b gzip). I\u2019m pleased with the results.<\/p>\n<\/blockquote>\n

Here’s another example<\/a> Jeremias Menichelli posted here on CSS-Tricks with the added twist of making them components in React and Vue.<\/p>\n","protected":false},"excerpt":{"rendered":"

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. In the past, we\u2019ve used entire Canvas-based charting libraries (156k\/44k gzip), but that seemed like […]<\/p>\n","protected":false},"author":223806,"featured_media":269157,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[802,923,469],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/radial-progress-bar.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":175074,"url":"https:\/\/css-tricks.com\/mega-list-svg-information\/","url_meta":{"origin":269130,"position":0},"title":"A Compendium of SVG Information","date":"July 22, 2014","format":false,"excerpt":"A huge pile of information about SVG. How to Use SVG These are overview articles covering lots of stuff relating to SVG. Why to use it and the basics of how to use it. Mostly: , background-image, , , and \/. Using SVG by me SVG on the Web \u2014\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":272772,"url":"https:\/\/css-tricks.com\/using-custom-fonts-with-svg-in-an-image-tag\/","url_meta":{"origin":269130,"position":1},"title":"Using Custom Fonts With SVG in an Image Tag","date":"June 21, 2018","format":false,"excerpt":"When we produce a PNG image, we use an tag or a CSS background, and that's about it. It is dead simple and guaranteed to work. PNG is way simpler to use in HTML than SVG Unfortunately, the same cannot be said for SVG, despite its many advantages. Although you're\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/nano-svg.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":253419,"url":"https:\/\/css-tricks.com\/brotli-static-compression\/","url_meta":{"origin":269130,"position":2},"title":"Brotli and Static Compression","date":"April 12, 2017","format":false,"excerpt":"Content compression can be as simple as flipping a switch, but there's a lot to consider beyond that. We pretty well know what we need to compress, but what about configuring compression? Or static versus dynamic compression? What about Brotli? By now, Brotli enjoys support in a good chunk of\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":324484,"url":"https:\/\/css-tricks.com\/libraries-for-svg-drawing-animations\/","url_meta":{"origin":269130,"position":3},"title":"Libraries for SVG Drawing Animations","date":"November 11, 2020","format":false,"excerpt":"In 2013, Jake Archibald introduced this cool trick of animating an SVG path to look like it\u2019s drawing itself. It\u2019s 2020 now, and the trick is still popular. I\u2019ve seen it on a lot of websites I\u2019ve visited recently. I, too, feature an animated SVG loader on my website using\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/castle-svg-texture.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":287273,"url":"https:\/\/css-tricks.com\/svg-properties-and-css\/","url_meta":{"origin":269130,"position":4},"title":"SVG Properties and CSS","date":"May 13, 2019","format":false,"excerpt":"SVG has its own set of elements, attributes and properties to the extent that inline SVG code can get long and complex. By leveraging CSS and some of the forthcoming features of the SVG 2 specification, we can reduce that code for cleaner markup.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2015\/05\/svg-fallback-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":312443,"url":"https:\/\/css-tricks.com\/creative-background-patterns-using-gradients-css-shapes-and-even-emojis\/","url_meta":{"origin":269130,"position":5},"title":"Creative Background Patterns Using Gradients, CSS Shapes, and Even Emojis","date":"June 10, 2020","format":false,"excerpt":"You can create stripes in CSS. That\u2019s all I thought about in terms of CSS background patterns for a long time. There\u2019s nothing wrong with stripes; stripes are cool. They can be customized into wide and narrow bands, criss-crossed into a checked pattern, and played with in other ways using\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/surfer-pattern.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/radial-progress-bar.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/269130"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=269130"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/269130\/revisions"}],"predecessor-version":[{"id":269158,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/269130\/revisions\/269158"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/269157"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=269130"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=269130"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=269130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}