Create an animated, circular progress bar
Vložit
- čas přidán 1. 06. 2024
- Want to step up your CSS game? I have free and premium courses 👉 kevinpowell.co/courses?...
🔗 Links
✅ The challenge: piccalil.li/blog/challenge-00...
✅ Andy Bell's solution: piccalil.li/blog/solution-009...
✅ SVG to Base64: fffuel.co/eeencode/
✅ Finished code: codepen.io/kevinpowell/pen/Yz...
⌚ Timestamps
00:00 - Introduction
00:29 - Front-end club challenge
01:50 - the "problem" with the progress element
03:40 - Why I’m using a div
04:40 - Using JavaScript to add the appropriate role and aria-attributes
07:53 - Styling the progressbar only if JS is enabled
10:30 - The basics styles for the progressbar
14:00 - Using the aria-valuenow for the content of the pseudo-element
16:18 - Making my test buttons work
19:55 - Creating the visual bar with a gradient
23:55 - Adding the checkbox when we are at 100%
27:30 - Creating an animation using @property
30:50 - Using an SVG as content on a pseudo-element
32:45 - Fixing the animation timing
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my CZcams channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
It took me years to realize Kevin says “my front end friends”, and not “my friend and friends”
And I only know it because of you 😅
Such as me. Thanks mate 😂
Bro you just saved me years
LOL! I was always wondering why he would say, "Friend and Friends."
oh!!!!!!
There’s the tag which is specifically designed to only show if JS is disabled
I feel so dumb when watching Kevin's videos and comments.
@@mrgamerzyt3945 Lmao, chill, you're not
I'm new to this channel and to the web dev as well and now I can see why he's called a CSS God.
Keep it up Kevin!
Kevin is a great youtuber to watch when learning front-end. However I would not recommend watching a video as advanced as this during the beginning of your journey.
@@granthaley6110 what would you recommend then ?(assuming we have some basis)
+30 min single css trick, you know its a banger.
That's great, Kevin! A few months ago, I was working on a Pomodoro Timer with a circular progress bar that progressively changed its color to simulate the 'good,' 'warning,' and 'alert' states as the countdown reached 100%. Initially, I struggled with the ring animation at the beginning and end of the countdown, but I saw how you solved it in this video, and it's amazing. Thank you for sharing such useful videos!
Two weeks ago I struggled with the same task. And all my steps were very similar to yours. But finally I switched to SVG :)
SVG is drawn much nicer on small sizes due to good scaling with antialiasing and stroke-linecap=round. Borders on small sizes looks ugly.
But it was a very good experience. Nice to see that approach here :) Thank you
In 2017 I had a task to make an animated partial circular chart. And I've been using SVG as an only option. I'm glad to see that just in 7 years browsers begun to get close to the solution.
Hey Kevin! I love these CSS videos and the style of them. It’s always so interesting seeing your approach to things and how you tackle them using obscure CSS tricks that live at your fingertips!!! Would you ever consider building a full front end web dev course? That would be great to see too!
As always great video Kevin, it is always nice and deeply inspiring to watch you while coding some css! Warm greetings from Italy
This is probably one of my favorite videos you have done in a while.
A video on what is valid in the “content” property might be fun. I know you can use an svg but I always forget how. And I didn’t realize you would be able to add % after the attr()!
You're the boss man
Broke it down to my level smoothly
Very cool. One limitation, however, is that the cut out in the middle will not work on transparent backgrounds, such as diffuse glass, as it covers them up. To make this work you can combine background: with mask: like this "mask: radial-gradient(circle, transparent 60%, black 60%);" This will blow also the number in the middle away but you can wrap up the progress bar with another containing div and stick an absolutely positioned sibling div to get the number back.
I was just looking at making circular progress bars yesterday, what a coincidence :D
impressive skills! I love that content attr() "%"! with the display grid. Very clever
This is awesome. You just have me a playful idea to animate a custom countdown timer that ends with a SVG status. Time to code 😁
conic-gradient for the progress bar - nice. I actually would really like to learn the svg method as that has a lot more possible applications.
This is helpful ❤
Thanks Kevin! Always something new to learn about CSS from these videos.
Question: do you know of any way to add a "border radius" to the circular progress bar with CSS or would you need to resort to SVG?
Actually I just thought of something: you could add a round (pseudo) element that acts as your line cap and move it around using the trig functions 😄
But I'd still love to hear of any other ways to achieve this
Not completely sure what you mean? Instead of a circle, to be more of a rounded square? I'd do it the same way I think. If you update the codepen I linked in the description so the border-radius is, say, 20px, it works. The only issue is the inner one should be smaller than the outer one, but you could get that to work with a calc() and an extra custom property, something like border-radius: calc(var(--border-radius) - var(--border-size)) // the border might have to be divided by 2, not sure :D
@@KevinPowell I mean keeping it a circle but having the actual inner progress indicator have a round cap instead or a sharp edge.
like stroke-linecap="round" in svg
Recently discovered this bit of magic: grid-template-columns: repeat(auto-fill, minmax(35ch, 1fr));
No breakpoints required!
Great! More accessability tricks, please!
PS: I would've use svg or clip-path.
PPS: You could've keep conic gradient as final background and animate color to green.
Also I would've place checkmark inside of the progressbar, so its appearenca can be animated too.
Yeah, I thought about animating the check in, but got lazy 😂
Thanks ❤
Pretty cool
Nice and I really appreciate you showing how to use the aria attributes, but I wondering why you are not using a custom element instead of a div here. The code is pretty straightforward: you setup the attributes in the constructor, you observe attribute aria-valuenow to set --progress whenever its value changes and attaching the shadow dom will hide the content.
You can then decide, if you want to, where to put the styles: in the global CSS or in a style element within the custom element?
Kevin again a great video. Thank you so much.
I do have a question: How can we use this if the real background was an image. Can we make the center background (covering the gradient) transparent in any way and still have it work? With clips or something?
❤
Very good, it is complex. And 'aria-valuenow' as attribute for some reason isn't 'aria-value-now'.
I'm a simple man, I see a new vid from Kevin, I give it a like before I start watching
What about using an eventListener for "animationEnd" to switch the 100% for a check mark? Great video as always!
8:25 I'd handle determining whether JS has loaded by simply using JS to clear out or hide the placeholder span. That way, it shows up by default, but gets removed if everything is working correctly, and it's pretty straightforward to target just the span, which could have its own class/ID.
That was good, could you also create a Knob component
I see nothing special except the CSS God at work.
Am I right that it applies only when we have perfect circle? When we change aspect-ratio of both and set border-radius for 5px it will broke? Is there any other solution instead of iconic gradient in that situation?
Nice. I'm gonna go try to make this actually work without JavaScript now :)
I had a version with checkboxes that worked with :has(), but it was a bit messy :D
@@KevinPowell I was thinking more of using Web Assembly...is that cheating maybe? 🤷♀
Built a version of it using Blazor WebAssembly. The actual progress indicator has one line of code in it - a property declaration - the rest is pure HTML + CSS. I used SVG for the circle in the end, as it seemed to be less code, and I'm less familiar with SVG. End result isn't 100% right graphically (I haven't colored the background green on completion, for example) but it's pretty good. Was a fun little exercise!
Thank you for all your great videos. I have one remark. When watching your videos on Apple TV or streaming them to another device, the "in video" links do not appear. Please list all links in the comments and do not rely on the in-video links. Thank you.
Also love your take @KevinPowell
add selectors for your js to the elements. a class prefixed with js- for example, or a data attribute. never js on classes used for styling.
for interactions, absolutely. but for applying styling, animations and transitions it's OK to change the classList based on the state, and even select it. Though, you're probably better off using the Web Animation API :)
Someone will come and remove that class "hide-on-mobile" and does not expect that there is a whole js library behind this class. In my eyes its very bad practice to combine a styling class with a js functionality.@@dealloc
2:35 little bit of all:unset always helps
Can you make it work with scroll? A circular scroll indicator that turns to a back to the top button on hover
Does CSS nesting scope the rule to its nested context?
Could you please make a video about zoom transitions? While scrolling.. for example you see the backside of a Camera and while scrolling it Zooms through the Viewfinder and shows the Picture (took with certain camera)
Kevin, what is the difference between using classes and attributes as css selectors, and why do you prefer using attributes?
No difference. I like using attributes especially when it enforces accessibility, like it does here
@@KevinPowell thanks!
The correct way is to go with svg with display grid and 2 circles inside it stack on each other. super easy to animate too.
If a client of mine doesn't use JS, I will tell him to Fuck off 😂😂
Kevin one day I was really stuck in styling 4 options of a MCQ quiz. They were expected to line up in 2 by 2 grid by default & they would stack vertically if the content couldn't fit in the given width. I wanted to do it css only. But I tried & tried & couldn't even do it with javascript. I just quit the idea & let them stay 2 by 2 always. What could be a solution to this?
that is nice and has been done and done by many - but the trickier one is in reverse though -
What do you mean by in reverse? 🤔
@@KevinPowell - a countdown
0:31 in my head is Matt Gray saying, "at the beginning of that paragraph I thought you were talking about piccalilli"
You didn't put a link to mdn of the list of houdini syntax options!
Instead of hard-coding the fill colour in the SVG, you could instead use `currentColor`
Reply to 22:27... Just going to throw a wildcard suggestion in here.
You later discover that the value does not work because it need's a percent character.
Can you add it using the same trick there with the attr(aria-valuenow) "%"
Or does it not accept this syntax?
Really wish we could do that, but for now, attr() can only be used as content and nothing else. It's supposed to be expanded on, but hasn't been yet afaik
I don't understand why you didn't use SVG to make all the graphics instead of CSS.
With SVG you could move the end of a line around a path, put a circle of a rectangle on this end to act like a volume rotative button cursor and improve readability of the transition between the black round line and the grey round path.
You could even use SVG animation elements to be triggered on not started (0% of the CSS animation)/starting (1%)/ending (99%)/completed(100%) states.
This way all animation logic is embedded in the SVG file, so you can easily switch to a file with different or no idle animation if the media query "prefer-reduced-motion" is set.
2:15 I created a full CSS reset style for all annoying to style HTML elements in a CodePen, if you want I could give you the link to the pen
This video could be expanded on to use custom elements, this would make the whole progress bar into a new component and it would be reusable.
How to make PRE to have max 100% parent width? When a line in PRE is long it stretches whole site with horizontal scroll. I want PRE to have horizontal scrollbar and not whole site. It works when containter containing PRE have fixed width, but it can't, have to adjust and can't be fixed. Thanks for video, as always awesome :)
It's something connected to grid... When I removed grid, so my PRE is not in container which is grid element everything is working fine, no body overflowing and horizontal scrollbar is on PRE like it should. But it have to work in grid layout, and how make it work I have no idea :P
Found it, CSS Tricks: "Preventing a Grid Blowout". It's "min-width: 0 problem". Didn't know about that :) changing minmax(auto, 1320px) to minmax(0, 1320px) solved the problem :)
I was waiting to see how he will animate that bar(without using SVG)
I thought I'd see him struggle and boom 💥 💥.... he just used conic gradient😂
Well… I think it’s a bit buggy with animation, as you are changing value to new value while progress bar reaches it after 500ms only. So it is kind of working but with latency of animation duration 😅
Another question is why you were able to add “%” to content property in css, but it wasn’t possible to do the same thing with conic-gradient property?
Everything else is perfect 🤩
Yeah, the animation is slightly behind, but I don't think that's a big deal 😊. No way of anticipating where it'll be, so I'm happy with that for a simple visualization.
As for the custom property, I had to use @property so I could animate the custom property, otherwise it worked fine, unless I misunderstood what you were pointing put
🐐
but how to make the center circle transparent, not white?
I'd use an SVG instead then, and just have it follow the stroke, with no fill on it
Quiz use something like SSG with Astro + HTMX and 0 JS is needed. Each pick sends off a call for an update to the Progress thing.
Uploading a file with a progress bar at best is guess and at worst is fake, so fake it while not using JS anyways.
If you're using htmx you're using JS though... maybe not writing it yourself, but it's happening behind the hood. I could have skipped the bit where I looked at how I was faking it I guess, and it's why I skipped over the loading part, but figured some people would want to see the general idea of what's happening there. Also, if I used Astro and HTMX, I'd lose 50+% of my audience, who are often beginners.
I do fully understand and it is good for the general concept, due to most of the important bits are CSS.
@@KevinPowellI discovered this just this week: you can write a page with and periodically reload the entire page, without javscript. You can use it to update the progress bar with a value provided by the backend. But apart from proving that it is possible, why would anyone do it on a real website?
cooooooooooooool
one of the first things in programing AI would dominate first is CSS, boy i coudnt be more wrong, its horrendous in been helpfull with css. it can help you to creata a whole apliaction in javascript before it can debug why my blue text is red. i guess u got more fat to burn with a mainly css channel for sometime. nice tips as aways
Yeah, CSS is way to context dependant for AI. JS has the advantage where you want to isolate things as much as possible, and there isn't the visual interaction within layouts. I don't think AI is going to be taking over any langauges anytime soon either though. That last 1-2% that it might need to get there is the hardest part and will take a long time.
If JS is not enabled, then you’d need to rely on server side code to adjust the markup.
i dislike that you didnt animate the Background color at the end :c
First
Would be cool to have a TLDR version at the start for people who doesn't have 35 mins to spend.
Finished code is in the description for that 😊
Please speak mese adam befahmim chi migi American ha ham nemifahman
The question "what if the user doesn't have javascript enabled" is a pointless thing to ask in 2024. The majority of things people interact with on the web use JS. Social media won't work without it. It is actually hard to turn off now. I don't get why people ask this now. It is a bit like designing cities around horse and buggies at this point.
If you've ever been in an area with poor wifi or other signal issues (e.g. on a plane, in a building with a metal frame, or many places abroad), it's absolutely possible for a page's JS not to load. There might also be problems with server timeouts and many other network errors that can occur. It's probably not vital that this progress widget works in all circumstances, but there are plenty of instances where a dev needs to consider these worse-case scenarios. They're more common than you might think.
There are people who enable JS on a site-by-site basis. It might not be a lot of people, but they are out there. Now, if you're creating something where the entire functionality relies on JS, then yeah, you don't need to worry at all. If I have a mostly static site that has a few extras, then there's no reason not to progessively enhance it
@@KevinPowellthere are also platforms, like Zoho, where JS just isn’t an option for building front ends.
I dont have it enabled by default
IKR! might as well build a site for Internet explorer 😂