Create an animated, circular progress bar

hello my friend and Friends progress bars like we can see right here are they they tend to look really cool uh but they can actually be kind of tricky to get right and there's some certain things that sometimes you have to take into account with these that you might not even think about at the beginning of them but there's also a lot of fun CSS tricks and tips and other cool stuff that we can explore while diving into how to create one of these so I'm excited uh to look at how I created this um and just before we do I just want to let you know that this is part of Andy Bell's uh front end challenge progress indicator that we can see right here that he posted on Picadilly which is his blog I'll link to this down below because if you want you can give this a try um he's put the the challenge here itself he's included the figma composition the link to the font some colors and everything so if you want to try yours first and then see how I did it afterwards uh by all means do that and he's also going to be posting a solution to this he hasn't as of the time of recording this but it should be coming out close enough uh to when this video is coming out so if he has posted his solution I'll include that in the description as well uh and a few things points to consider here what is the experience going to be like for someone who does not have JavaScript enabled you might be saying who doesn't have JavaScript enabled but it does happen so we want to take that into account uh what technology is best suited for this component how can JavaScript and CSS communicate well uh this is going to be a big part of what we're going to be talking about in this video um and I think it's going to be a lot of fun to work on um and yeah so you have a figma file here if you want to grab any assets from it as I said that is linked in is um from the website right here and then there is what we're going to be working on where you can see I've set up a testing ground because we're going to use this to sort of simulate different things that could be happening I have a little bit of info at the top here uh but we're the the progress indicator itself we're going to be working on I haven't done anything there's no CSS written for it there's nothing um for the the what we're focused on in this video and what you might be thinking if you had to do a progress indicator uh is to use progress and if that is the case then you're on the right track um cuz we have progress indicators they're they're great they work really well um and we can come in we can say that it has a value of say 50 and a Max of 100 and it's going to be filled right up to the middle or maybe this is a 75 or whatever and it works there's two problems with this first of all uh the first one is these are hard to style you can definitely do it uh you throw an appearance we can come here actually and let's just choose that progress and I can say appearance uh is that spelled right I think so none but then it still has some styling on it which I find weird and there's actually some prefixes that we have to use if we want to like fully style it and then we have other prefixes we doing it in Firefox and it's kind of annoying um and so that's part of it now if you had a progress indicator like this that's probably the right way to do it um where it's just always going to be a progress indicator but it made me think here what is the experience going to be like for someone who doesn't have JavaScript enabled and this is definitely very context dependent on the what you're going to be building but for me I almost think that if somebody doesn't have JavaScript en and I'm assuming this is something that the user's interacting with so they're uploading a file or they're you know it's tracking their progresses they're answering quiz questions or something like that in which case they sort of need to have JavaScript enabled or they don't really have a progress bar so if you do have a progress bar where there's no value set um that's where it was bouncing around before let's turn off that uh you know back to this um or no value at all this is considered indeterminant which is why it's bouncing so maybe that's the right thing to have cuz we can't track their progress but they're probably also not uploading a file or doing quizzes or something like that without any JavaScript so I'm actually going to make this a div and I'm going to call it class is equal to progress bar and the reason I'm doing it as a div is because I don't want it to be a progress bar unless the person actually has JavaScript enabled uh in which case we'll turn it into a progress bar right uh and so yeah I'm going to do it with the div like this and this is where maybe you would just display none this entire thing you don't want it to be there and I guess it could just be the regular progress bar in that case uh though I am going to put a message in here instead so uh I'm going to come in with this where we're just saying this really awesome feature requires JavaScript uh you probably want a better message than that it's not a great one but um if it's something it's essential for the working of the site I sort of want them to know that they're missing something so that's the approach I'm taking here uh again this is very context dependent to what your progress bars purpose is and how it's working this is how I'm going to approach it for this one and it's going to let us see how we can sort of progressively enhance this into something else so before we get into the CSS of styling this we need to turn it into a progress bar so we're actually going to start over in our JavaScript world over here uh where the first thing we need to do is obviously you know get the progress bar so we can do something with it so that's nice and easy we can just do that uh with a query selector here to find it so we're just getting the query SEL selector for my progress bar and then we want to do stuff with it so we can create a function for that called enable uh progress bar I think that makes sense because that's exactly what we're going to do uh and it just means that if the javascript's running we will enable our progress bar so how can we enable it uh I guess you could actually choose that element and change it from a div into a progress bar but I'm just going to come in and use the roll attribute here so roll is equal to progress bar which should give it the same meaning uh is just using the semantic element in general the rule that you want to follow is no area is the best area and roles sort of fall into that as well where you'd want to use the semantic elements instead but because of the justifications I've given so far this is why I'm going to use the r instead of using the semantic element and by doing that we get to the same point uh in the end uh the next one we're going to do here is set another attribute which is our area value now this is basically the same thing as when I set up that progress bar here so if I did my uh Pro progress and we said the value was equal to 50 right uh instead of setting the value like this because I'm using the rule of progress bar I don't have access to that value so I'm using the area value now which is essentially the same thing uh I'm going to set it to zero for now as a default that we'll come in and we'll update that um a little bit because maybe we don't want it to start at zero uh and then the last thing that I'm going to set here is an area live and this is just um so the area live polite just means like if it's being updated so the the the number in there is changing we do want to let people know that that's happening though we'll actually we'll talk about that a little bit later when we set up the the function that's going to sort of progress things along the way um but it just means that if there're if something's happening instead of announcing you know 1 2 3 4 5 6% as the files uploading let's say uh if they're interacting with the site in other ways it's going to sort of Silence that uh those announcements uh and of course that's for screen readers specifically right there but nice thing to put on if you have values that do change but you do want to let people know um that you know things are are making progress if they're not interacting with the rest of the site but again we'll talk a little bit more about that a little bit later on uh with all that done I'm just going to come here and we can just you know enable our progress bar then nothing too fancy um one thing that's important there is I am doing a defer on my script up here at the top so when I bring in my JavaScript just cuz the script's at the top but I want to make sure that it's only coming once the rest of the page is loaded or else it wouldn't find that progress bar but we can see here in my Dev tools uh that we have the class of progress bar now has a rooll of progress bar and the area value of none and the area live of polite on there so we've sort of we're enabling the progress bar to become uh something that's semantically a progress bar using our JavaScript right there and everything's working huh okay cool so we've turned it into a progress bar but now we need to make it look like one so let's jump into the CSS and the first thing we're going to do is let's shrink this back down um is go into our CSS and we're going to choose that class of progress bar um so progress bar and just for now let's just change the color of it um just so we can see we're going to say color is red you know just so it stands out you know we're letting people know uh and I want to show that we're selecting it but I only want to do this if the JavaScript hasn't loaded how do I know if the JavaScript is loaded or not well we just added that Ro of progress bar to it so I can say Pro progress bar not and then here I can say roll is equal to progress bar and now if I hit save you're going to see it goes back to black interesting right so this is basically if my JavaScript isn't enabled and we can actually test this in our Dev tools as well if ever you want to um you can just open up your Dev tools and then do a control shift p or if you're on a Mac that would be a command shift p and when I do that I can just do disable JavaScript right there so if I disable JavaScript on this page and I refresh it comes in as red red and then I can come back here control shift p command shift p on a Mac and do enable JavaScript and now I've turned JavaScript back on and if I refresh my page it goes back to black so we can even put a little comment here if JavaScript is disabled we're going to do this so that's perfect that is working now we can style it with our JavaScript enabled so the very first thing I want to do is if we have a ro of progress bar I can just put that at the top I don't need to worry about the class anymore I'm just going to do everything based on this rooll here uh and we're going to say that the text that's inside here we don't actually want to see it right so this span that is right here we can come here and I'm going to use nesting and I'm just going to say a display of none and you can see ADV vanishes if you haven't seen nesting in CSS before it this is basically the same as doing uh my span over here and writing progress bar space span and then putting my styles for it uh the advantage of using nesting is um it's just a nicer developer experience because I can keep things nested in there that I need to um and it you know just I don't have to keep repeating this parent selector over and over again we're going to do some stuff in here so that's why I'm going to use nesting browser support for nesting is not perfect so if this is something you'd want to do for production maybe not the right thing if you're doing it for a challenge like I'm doing now it's a perfect time to experiment and play with things like this and if you do want this for production again it's not hard to modify this and just pull the span and put it out there and just have a few more selectors along the way as for the progress bar itself let's come here we're going to add some styling here and I'm going to set a size uh that's 132 pixels just cuz I'm grabbing that from the figma file uh and I'm also going to set a bar width of 20 pixels which is just like the thickness of our circle thing um and just so it just makes it easy to change things without having to dive into the rest of the code then to use that size uh we can come down here we can say that the width is going to be my VAR size and I can also give this an aspect ratio of 1 uh to one one so it's just going to be a perfect square you can see it's taking up that room but let's actually come in here and give it a background for now uh let's just do blue for the moment so we can see that it's there uh right so it's it's functional uh of course we need that to be round so I'm going to give that a border radius of 50% and it turns it into a circle and the next thing we're going to do we're going to come back to make like the actual progress bar part of it so we want to set a few more things up here and this is where I had some fun with setting this up uh is getting the the thing that's going to be in the middle so I'm going to stay here and I'm going to do an Amper sand after and the amp percent here is just part of nesting so it's just taking my progress bar and it's putting it like this so if you're going to do this without nesting you would just type it in like that uh the reason that I'm using the Amper sand here instead of you know here I didn't use one is because I need this to be all stuck together um instead of it being separated right because if I do it like this it's a descendant selector if I want to make sure it's not a descendant selector cuz it's an after I need to do it like this now for now I'm going to come in with a content of nothing but we're actually going to change this in a little bit and this is where things get kind of fun uh but let's just give it a background of white for now a border radius of inherit you could probably do the 50% too but I just want it to match and this is where actually the bar width is going to come in so we're going to give this a width and it's going to be a cal of 100% minus my VAR bar width and this is one of the reasons I like custom properties is because you set this on the parent but it's getting to things that are like sort of deeper in um and it still works and so we're just saying that take 100% of the parent subtract that 20 pixels and the reason I did 20 here is it's actually going to be 10 I guess because it's going to be you know on each side um but it should work uh and we'll give this an aspect ratio of 1 to one as well uh if you do one you can actually just put a one and not have the second value there but um I like having both of them and nothing's showing up yet just cuz if you have a pseudo element you either need a position other than static or you need to give it a display property uh and in this case I'm going to give it a display of grid and I'll show you why I'm using grid in a second uh but you can see there we go it has come in and it's working now we need to get it in the center so I'm actually going to come back up onto the parent over here and we're going to say that this is a display of grid as well and we're going to do a place items of Center you can do it with flex box as well whatever is easier um and it works and puts it right in the middle and while we're here uh just up here I have my background that I'm also going to add in a margin and let's just do like two REM top and bottom and then an auto left and right just cuz it centers it and I think it looks nicer with the overall layout um obviously we don't need it to be centered uh and yeah so there is that now as far as the number that's going to be in the middle this is where things get a little bit more interesting uh and we can use something this is only works inside currently the content property it's something that's supposed to eventually be available elsewhere uh but for now we can only use it in the content and you can take any attribute that's on an element and grab the value of that attribute and use it so if you remember let's go and take a look and inspect on here because of our JavaScript we have the area value now which is the actual value that this is going to be in our progress and Java we're going to use JavaScript to update that value now so this sort of answers the question of how can CSS and JavaScript communicate a little bit is JavaScript is going to be updating this value we might as well get that value and use it in our CSS so I can come right here and do this as an at and then in there we just say that it's my area value now we write the one that we want hit save and we have a zero that's showing up right there let's come and set a font size on that cuz it's a bit small I thought I set a font size but apparently I didn't so we'll just come right here and we'll just say font size is to REM make it a bit bigger uh and this is where I want that to be in the middle and this is why I put a display grid on the after uh cuz if you have an element that has content inside of it you can do this on a paragraph you can do this on anything a display grid with a place items of Center we'll place the stuff in the center so we get my zero coming in and it's right in the middle and let's just say I came and you know we set that as a zero but if I say this is a 50 you can see 50 is there if I say that's a 10 we have the 10 there so we'll stick with the zero for now but we'll update that um shortly enough but the one thing that's missing is the percent sign um so how do we do that well we just come here and in quotation marks CU it's a string we just put percent and it shows up and I could write whatever I want here ABC it's going to show up as that content so uh I can put the percent in this case I don't want a space but if ever you wanted one you just put the space in it will include it uh so it's a lot like JavaScript the only thing here is you wouldn't put the plus um because that would just break the whole thing it doesn't know what that means but uh it's just like putting in a value and then a string after like you might do in JavaScript or whatever similar approach right here uh so yeah I think that's really cool I think it's a nice way that enforces that we're using the proper accessibility by basing this on the value now so we're only updating one thing with our JavaScript and it's going to update that and it just works and it's perfect cool so we need to update this bar to be able to do it but before we do that let's get our buttons down here working really quickly I'm not going to walk through the whole process uh of doing that but I am going to come into my JavaScript here um and this is sort of the main thing we're relying on uh this is like my you know uh for simulation so what we're going to do here for this simulation is uh let's start off with a really um simple thing first of all uh I'm not going to walk through everything here but it'll give you the basics of what we're doing uh I have my testing ground that we're going to be working on I have these buttons that are in here and you can see these just have the progress on them um that we're going to sort of be able to grab the number from those and set it all up and again this is just a simulate so we can make sure everything is working you wouldn't do it like this for real but we're going to grab that um testing ground just with a basic query selector nothing too complicated there and then after that what we're going to do is we're going to come in and we're going to say that on that testing ground We'll add an event listener so when we click on it uh something is going to happen now I only want it to do something if I click on one of the buttons I don't want it you know if I'm clicking in all these other places I don't want it to actually do anything and I could add an event listener to each Button as well if I wanted to there's not that many buttons so it wouldn't be the end of the world uh but we can say that if the Target that we click on isn't a button that we just end the function there so we don't continue doing anything uh but if it is a button then and the return here we don't have to do an if else statement just cuz I'm returning so this means like exit the function if we're not clicking on a button um and again if you'd prefer just to add an event listener to each button that would be completely fine as well uh but what we can do is we can grab something called progress and actually for this we're just going to come up here and I'm going to say uh let progress is equal equal to Z um just to set this outside because it's going to make life easier for when we do the simulated one um but we're going to say that my data set uh we're just grabing the data set of progress so the data set progress if we look in my element we have a data progress so we're just grabbing the data set of progress and it just takes the value from that so uh we can even console log that console log progress um hit save and then when let's just open up my console uh any of these that I click on you can see 25 57 100 uh and this one will be fake upload cuz we're going to set that one up as a fake upload as well uh and so there we go we're getting those values what do we want to do with those though is rather than console logging things obviously we want to do something with it so uh we're just going to say that we're going to take the progress bar we're going to set the attribute area value now to the progress so in doing that which is our progress that's right here every time I click you can see it's updating and it's getting the value that we wanted as our number kind of cool uh again this part would be a little bit different but this part is exactly what you'd want to be doing where you're updating the area value now with your JavaScript to whatever the progress actually is just how you're calculating that progress would be a little bit different um the other thing here is just because I have put the let progress as a zero here cuz that makes sense right that where progress is starting at zero I'm just going to put this here as my progress um just cuz then maybe there's something else that's updating this and then you're wanting to pull in that other value whatever it is um but that just makes sense to me so we're going to set it up like that for now um to get the simulated one to work is a little bit different uh but we're not going to stress about that at the moment we're just going to get the bar working now because we actually have these values coming in this is working we need the bar to update so how can we do that is with our background uh with our background here instead of doing a back background of blue cuz that's not really very helpful uh we can actually do this using a gradient instead and the type of gradient we want for that is a conic gradient and I'm actually going to turn off this white background for now just so we can understand how this is working and then we'll turn the white background on that's going to make it look the way we needed it to uh I will caveat this with I took this approach because in the design that Andy provided um for this these lines were straight if those were curved edges I'd be using an SVG instead because you can draw along um so if you had an SVG that's like the circle here um you'd have it as the stroke and using stroke Das array with the end caps being round and then you could animate that and have it like sort of grow along so if you had rounded caps on there 100% SVG would be the way to go even the way I'm doing it now if you know even with these straight caps if you went with an SVG or that's where your mind went perfectly fine no problem at all um but for me just seeing those straight edges there right away I thought of aonic gradient so that's how I'm doing it uh so my background here will be as I said a conic gradient so we just say conic gradient and I'm going to do this on multiple lines just to make it easier to follow for like demo purposes so it doesn't stretch out too far so here let's just start off um I have the actual colors as custom properties uh I was going to do other colors but we might as well use them we have a color dark uh let's just do one it won't work okay we need we need oh maybe like that no we need two colors so first color will be dark uh and then let's do a VAR of its AR color dark glare uh and then we get the two of them coming in you see it makes this like spinny thing but it's a gradient right so we're going from the dark and then it slowly goes over to the lighter one but we can use color stops along the way so what I can say is this first one is just for now let's do a 50% and it's going to go from here to 50% and then the gradient is going to start and it's going to start doing the gradient that way from there but then I can actually say this one is just to make life easier I can say this one is starting at 0% and if I do that it can't start at zero in a way because uh right cuz the other one is going up to the 50 but it means that this one is starting wherever this one ends basically so right now we're at 82 so I can make that 82% and it's going to fill it up all the way to there let's turn that background color back on and you can see that what that's doing is it's making it look like it's filled up to the 82 there and just for fun let's just make this I don't know 32 and it's 32% of the way this is where I really wish we could come in and do this and this would be amazing if we could uh write the area value now and if that could work um that would just be absolutely amazing but sadly we can't do that yet so to solve that I'm going to put a custom property here so we're going to do a VAR of progress and we're just going to give this a zero as the default so by default where we have nothing no progress at all uh but if this gets set somewhere it's going to to Loop it around it sucks that we have to do two different things to make this happen but it's not that hard to do uh we're already setting an attribute of area value now so if we're doing that we can just come here and say the same thing progress bar and then we can say style and then on the style there we can do set property set property of progress and we want to set it to our progress the same way we had for the other one right so the custom property gets set to the same as our area value now and if I hit 57 uh it breaks everything because this needs to be a percentage so we can do plus and then percent at the end and that should fix it there we go okay I was a little worried there that I did something wrong uh but now whatever our percentage is at it's matching it along the way and it I think it looks pretty good it works I'm happy with that uh the harder part now is it's not really hard but we need a checkbox when we're in our completed State uh so when we get to 100% we don't want it to be 100 we want it to be this instead so to to be able to do that I'm actually going to make a change um or a bit of an update here where I'm going to pull this out from being here uh just cuz I'm going to set up the simulated one to I'm not going to go through all the code that I have here but I will put a link in the description um if you want to check it out uh and explore it which is basically the same thing we had before uh the only real big difference is I've added this simulate upload and I broke up um this update progress so here we're simulating progress which gets passed into here which updates our progress it's exactly the same steps um it's just basic Bally breaking things up a little bit extra so we can do the simulation where this number is going to slowly tick up I do want that to be animated and right now it's not animated which is important and another thing we're going to want to address and we have the check so I'm going to do the check first and then we're going to come and um set things up in a second the one thing I want to say here with this is um I've included this area busy here and this just means like as the numberers going up and as I mentioned before there's the area polite as well what the area busy means um is that this thing is happening and it's going to be constantly updating and doing something so don't keep announcing all the changes along the way the entire time until the progress hits 100% And then we turn it off so um if you're using a screen reader it's not going to say like 5 10 15 20 2530 it's only going to announce it once we get to the end and it hits the 100 and so people know the upload is complete uh but otherwise uh just cuz you would be kind of annoying if not right um so I'm including that there um just to mention it along the way um and I just realized here it say data busy want that to be area busy not data busy with that in place now um I'm going to go back to my Styles and what we're going to do is and this is where like I don't want to have to be updating classes or doing other stuff um even if it's with my JavaScript right when we get to the 100% we want the checkbox to show up but luckily that's not hard to do so it's going to be on the progress bar itself but when we have an area value of 100 so we can just come down here and I'm not going to put this nested just cuz I wasn't I want to make it really clear what we're doing um but I'm not sure if we could so uh it's our Ro is equal to progress bar we keep that uh then also if we have a area and it was our value now right value now is equal to 100 so the VAR the area value now I'm having trouble with my brackets here but the if the area value now is at 100 it means our download is complete or our Pro not our download whatever our thing is at 100% progress so in that case we're going to go on the after which is the same after we have now which has our current like our 57 right it's the exact same thing as this after right here but what we're going to do is we're actually going to change the content so content let's just put uh yay for now um because our download is done and we'll look at how we can put an SVG in there after but we have our yay so if I hit 100% you can see it switches to yay uh that also means we can change our background color to my VAR and it was a color success I think is it success it was perfect uh so if I'm at 82% it's not there if I hit 100% it's there if we do this simulation here where it ticks along it's going to work perfectly fine the entire time that it's going but when we hit 100% it's going to uh click over but there's a problem um or actually we'll see the problem when we get the animation the problem's not there yet so we can add in this to be animated animating this though takes a little bit of a trick because right now we're using this as a conic gradient and conic gradients are a background image right any gradient is a background image and you can't animate background images there's there's no way to transition them or do anything like that with them which is kind of annoying but luckily we have CSS Houdini now which has the app property which allows us to animate Uh custom properties individually the browser support for this is much better it's in Safari and chrome now though it's not in Firefox yet though I do believe it's actually in I think maybe nightly it's coming in Firefox um anyway um so browser support will be pretty good and again if it if browser support's not perfect for it they're just going to get this instead where it works it just won't be like a smooth animation or if they you know we have different states it won't animate to that state it's just going to sort of happen we're at 57 or we're at 82 or whatever it is it's going to click there instead of animating to that thing not the end of the world but how do we do it well at the top of our file we can do an at property and we want to get the name that we were doing so it was progress this is basically what we're doing is we're actually we're registering our custom property and giving a bit more information um as to what this custom property is because one thing with custom properties is they can be anything they can be a number a string uh a percentage lots and lots of different stuff so when we do this we actually have to tell it what the syntax is and to do the syntax it's kind of weird cuz it's like this where you do syntax quotation marks and then um the TR Le brackets and there's different stuff here you can have a number uh you can have a color you can have a whole bunch of different things and in this case it's a length percentage because we're using percentage as a length so uh that's one of them um I just go on the MDM they have a list of all of them I'll put a link to it down below um to figure out what I want there CU there's lots of different choices uh we have an inherits so do you want it to inherit or not I'm going to put false um doesn't seem to be something that probably should inherit but you could put it to true if you want it to and and what's the initial value initial value will be 0% because we want it to start at zero um you can see my syntax highlighting is pretty terrible here within vs code um I'm sure I can get an extension or something and at one point they will have to um improve on this but um we can put all of that in place and even though the syntax highlighting is terrible what this allows us to do is to come here where we have our progress being used and I'm going to come let's just do it right uh here I can do a transition and this if you do not register your custom property you can't do this but I can transition my progress now and we'll just say 500 milliseconds and now if I click it should animate but it's not animating because I spilled initial wrong which is partially maybe why may no it still doesn't look good uh initial value look at that you just need to spell things right and now it animates and so with that in place and having that as linear the reason I'm doing linear is just so if I'm simulating it it doesn't like speed up and slow down as it's going through this uh stage right here but we're going to see a problem here at the end of our animation where when it hits it's hitting 100 but we haven't animated that last little bit yet um so there's that delay so that's kind of annoying we'll fix that in a second it's not hard to fix a little bit of a hacky solution in a way but we'll look at what that is but I want to look at how we can change this into our SVG so let's jump over to figma um where we have this SVG that's right here I'm going to right click on it I'm going to do copy as SV s VG so I have the actual SVG code which you can do from figma which is kind of cool and then I'm going to go over to this site there's other sites that are like this but I'll link to this one down below which is um a way to get the base 64 encoding of an SVG so I can paste it in my SVG uh I'm actually going to change the color of it that we have right here to we had the custom property set up this is sadly where we can't use the custom property because of how this is going to be used um just cuz we want this value and I'm going to uh with that in place you can see it's actually it's showing me what we have here and I can copy this URL string so I'm going to click on that and it copies it and then what I can do is scroll back up to where I was setting that up and we had my yay and instead of the yay we can bring this in as this giant string right here um and I'm going to hit save and in doing that you can see I have my check mark that's coming in now it's great so it's there it's okay we're okay we're okay and then we get our check mark pretty cool right now the only problem I ran into you'll notice it's actually a little bit offc Center um and I played around with this a lot and I actually just had to modify my SVG um quite a bit to get it to work so I'm just I just made changes from the original one um here with my viewbox uh numbers and just to be able to sort of change the positioning uh and mucked around with it a bit so I'm going just going to update to the new one I have and now if I hit save you can see it looks a little bit more centered and like the original one I was just a little bit of magic numbering back and forth which was kind of annoying um but and it works and we got we get there in the end uh which is good but again when we get to the 100% we don't want like if I'm at zero and I get there I want that circling animation to finish before it turns into the checkbox how can we do that so I'm actually going to take this right here I'm going to remove it and we're going to come over here we're going to do some at Key frames and make a little animation and we're going to call it progress complete and progress complete is just going to have two so you could also have that as 100 100% and we're going to paste those back in and then that just means here we're going to have our animation animation of progress complete and I actually want it to take 0o seconds to happen and we can't really animate these anyway so uh the background color I guess could be animated um but I'm just going to do it as a 0 seconds and I want it to stay at the end of the animation so I'll include a forwards and then I'll just put an animation delay of say 1,000 milliseconds um so now if I'm at 57% and then we go up to 100 it gets there and then it switches over or if we're at zero we go all the way up it says 100% And then it switches over uh I did this is and you could probably use a custom property another thing here but I did a th000 here just because um I was using 500 so it's giving it a half second where we see the 100% before it switches over um so you can play around with those numbers you can set this as a custom property and then use a cal to like have it as double or triple the amount of time whatever you want um would work uh even if we're simulating it same type of idea it means that you know as this is ticking along and this number is slowly being updated and again this wouldn't be really simulated but just as that's going up we get to 100% then it switches on over I really hope that you enjoyed this video if you did enjoy this one and you want to see one where I copy a cool text scroll animation like you can see right now on the screen where as you scroll it sort of highlights the text or highlights text as you're scrolling down that video is right here for your viewing pleasure and with that I would like to thank my enablers of Awesome Andrew Simon Tim and Johnny as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome

Channel: Kevin Powell

Views: 39,502

Keywords: Kevin Powell, css, front-end, frontend, html, web development, css tutorial, tutorial, progress, html progress, css progress, progressbar, progress bar, html css js progress, progress bar with html css, progress bar with html css js, circular progress bar, circle progress, circle progress bar, circle progressbar, circular progressbar

Id: MXWP56LUI3g

Length: 34min 36sec (2076 seconds)

Published: Tue Mar 12 2024