 Hello, my friend and friends. Progress bars like we can see right here are they tend to look really cool, 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 to look at how I created this. And just before we do, I just wanna let you know that this is part of Andy Bell's front and challenge progress indicator that we can see right here that he posted on Piccadilly, which is his blog. I'll link to this down below, because if you want, you can give this a try. He's put the challenge here itself. He's included the Figma composition, the link to the font, some colors and everything. So if you wanna try yours first and then see how I did afterwards, 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 to when this video is coming out. So if he has posted his solution, I'll include that in the description as well. 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 wanna take that into account. What technology is best suited for this component? How can JavaScript and CSS communicate? Well, this is going to be a big part of what we're gonna be talking about in this video. And I think it's gonna be a lot of fun to work on. And yeah, so you have a Figma file here if you wanna grab any assets from it. As I said, that is linked in his 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 gonna use this to sort of simulate different things that could be happening. I have a little bit of info at the top here, but the progress indicator itself we're gonna be working on. I haven't done anything. There's no CSS written for it. There's nothing for what we're focused on in this video. And what you might be thinking if you had to do a progress indicator is to use progress. And if that is the case, then you're on the right track because we have progress indicators. They're great. They work really well. And we can come in and we can say that it has a value of say 50 and a max of 100. And it's gonna 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, the first one is these are hard to style. You can definitely do it. You throw an appearance. We can come here actually and let's just choose that progress. And I can say appearance. 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 wanna like fully style it. And then we have other prefixes for doing it in Firefox. And it's kind of annoying. So that's part of it. Now, if you had a progress indicator like this, that's probably the right way to do it. 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 what you're going to be building. But for me, I almost think that if somebody doesn't have JavaScript enabled, and I'm assuming this is something that the user's interacting with. So they're uploading a file or 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, that's where it was bouncing around before. Let's turn off that, you know, back to this, or actually no value at all. This is considered indeterminate, which is why it's bouncing. So maybe that's the right thing to have because 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 gonna 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, in which case we'll turn it into a progress bar, right? And so yeah, I'm gonna 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. Though I am going to put a message in here instead. So I'm gonna come in with this, where we're just saying this really awesome feature requires JavaScript. You probably want a better message than that. It's not a great one, but if it's something that'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. Again, this is very context-dependent to what your progress bar's purpose is and how it's working. This is how I'm going to approach it for this one. And it's gonna 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 gonna start over in our JavaScript world over here, where the first thing we need to do is obviously get the progress bar so we can do something with it. So that's nice and easy. We can just do that with a query selector here to find it. So we're just getting the query selector for my progress bar. And then we want to do stuff with it. So we can create a function for that called enable progress bar. I think that makes sense because that's exactly what we're gonna do. And it just means that if the JavaScript's running, we will enable our progress bar. So how can we enable it? 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 role attribute here. So role is equal to progress bar, which should give it the same meaning as just using the semantic element. In general, the rule that you wanna follow is no area is the best area. And roles sort of fall into that as well, where you'd wanna use the semantic elements instead. But because of the justifications I've given so far, this is why I'm gonna use the role instead of using the semantic element. And by doing that, we get to the same point in the end. The next one we're gonna 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 progress and we said the value was equal to 50, right? Instead of setting the value like this, because I'm using the role 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. I'm gonna set it to zero for now as a default so we'll come in and we'll update that a little bit because maybe we don't want it to start at zero. And then the last thing that I'm gonna set here is an area live. And this is just, so the area live polite just means like if it's being updated, so the number in there is changing, we do wanna let people know that that's happening. So we'll actually, we'll talk about that a little bit later when we set up the function that's gonna sort of progress things along the way. But it just means that if something's happening instead of announcing one, two, three, four, five, six percent as the files uploading, let's say, if they're interacting with the site in other ways, it's going to sort of silence those announcements. 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 wanna let people know that things 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. With all that done, I'm just gonna come here and we can just enable our progress bar then. Nothing too fancy. The 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 because the script's at the top, but I wanna 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 DevTools that we have the class of progress bar now has a role 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 something that's semantically a progress bar using our JavaScript right there and everything's working. Ha, 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 gonna do is let's shrink this back down as go into our CSS and we're gonna choose that class of progress bar. So progress bar. And just for now, let's just change the color of it just so we can see, we're gonna see color is red just so it stands out, we're letting people know and I wanna show that we're selecting it. But I only wanna do this if the JavaScript hasn't loaded. How do I know if the JavaScript is loaded or not? Well, we just added that role of progress bar to it. So I can say progress bar, not. And then here I can say role is equal to progress bar. And now if I hit save, you're gonna 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 DevTools as well if ever you want to. You can just open up your DevTools 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 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. And now we can style it with our JavaScript enabled. So the very first thing I wanna do is if we have a role of progress bar, I can just put that at the top. I don't need to worry about the class anymore. I'm just gonna do everything based on this role here. And we're gonna say that the text that's inside here, we don't actually wanna see it, right? So this span that is right here, we can come here and I'm gonna use nesting and I'm just gonna say a display of none and you can see it vanishes. If you haven't seen nesting in CSS before, this is basically the same as doing my span over here and writing progress bar space span and then putting my styles for it. The advantage of using nesting is it's just a nicer developer experience because I can keep things nested in there that I need to and just, I don't have to keep repeating this parent selector over and over again. We're gonna do some stuff in here. So that's why I'm gonna use nesting. Browser support for nesting is not perfect. So if this is something you'd wanna 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 gonna add some styling here and I'm gonna set a size that's 132 pixels just because I'm grabbing that from the Figma file. And I'm also gonna set a bar width of 20 pixels, which is just like the thickness of our circle thing. And just makes it easy to change things without having to dive into the rest of the code. Then to use that size, we can come down here and we can say that the width is going to be my bar size. And I can also give this an aspect ratio of one to one. So it's just gonna 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. Let's just do blue for the moment so we can see that it's there, right? So it's functional. Of course, we need that to be round. So I'm gonna give that a border radius of 50%. And it turns it into a circle. And the next thing we're gonna do, we're gonna come back to make like the actual progress bar part of it. So we wanna set a few more things up here. And this is where I had some fun with setting this up is getting the thing that's going to be in the middle. So I'm gonna stay here and I'm gonna do an ampersand after. And the ampersand here is just part of nesting. So it's just taking my progress bar and it's putting it like this. So if you were gonna do this without nesting, you would just type it in like that. The reason that I'm using the ampersand here instead of, you know, here I didn't use one is because I need this to be all stuck together instead of it being separated, right? Because if I do it like this, it's a descendant selector. If I wanna make sure it's not a descendant selector is it's an after, I need to do it like this. Now for now, I'm gonna come in with a content of nothing but we're actually gonna change this in a little bit. And this is where things get kind of fun. 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 gonna give this a width and it's going to be a calc of 100% minus my bar, bar width. And this is one of the reasons I like custom properties because you set this on the parent but it's getting to things that are like sort of deeper in 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 gonna be 10 I guess, because it's gonna be on each side but it should work. And we'll give this an aspect ratio of one to one as well. If you do one, you can actually just put a one and not have the second value there but I like having both of them. And nothing's showing up yet just because if you have a pseudo element you either need a position other than static or you need to give it a display property. And in this case, I'm gonna give it a display of grid and I'll show you why I'm using grid in a second. 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 gonna come back up onto the parent over here and we're gonna say that this is a display of grid as well and we're gonna do a place items of center. You can do a flex box as well, whatever is easier and it works and it puts it right in the middle and while we're here, just up here I have my background that I'm also gonna add in a margin and let's just do like two rem top and bottom and then an auto left and right just because it centers it and I think it looks nicer with the overall layout. Obviously we don't need it to be centered. 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 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. 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 we're gonna use JavaScript 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 ATTR. 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 because 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 two rem, make it a bit bigger. And this is where I want that to be in the middle. And this is why I put a display grid on the after because 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 will 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 we set that as a zero but if I say this is a 50, you can see the 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 shortly enough. But the one thing that's missing is the percent sign. So how do we do that? Well, we just come here and in quotation marks because it's a string where you just put percent and it shows up. And they can write whatever I want here, ABC. It's gonna show up as that content. So 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. So it's a lot like JavaScript. The only thing here is you wouldn't put the plus because that would just break the whole thing. It doesn't know what that means but 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. 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 gonna 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 gonna walk through the whole process of doing that but I am gonna come into my JavaScript here and this is sort of the main thing that we're relying on. This is like my, you know, for a simulation. So what we're gonna do here for this simulation is let's start off with a really simple thing. First of all, I'm not gonna walk through everything here but it'll give you the basics of what we're doing. I have my testing ground that we're gonna be working on. I have these buttons that are in here and you can see these just have the progress on them that we're gonna sort of be able to grab the number from those and set it all up. And again, this is just to simulate so we can make sure everything is working. You wouldn't do it like this for real but we're gonna grab that testing ground just with a basic query selector, nothing too complicated there. And then after that, what we're gonna do is we're gonna come in and we're gonna say that on that testing ground we'll add an event listener. So when we click on it, something is gonna 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. 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. But if it is a button then and the return here we don't have to do an if else statement just because I'm returning. So this means like exit the function if we're not clicking on a button. And again, if you'd prefer just to add an event listener to each button that'd be completely fine as well. But what we can do is we can grab something called progress and actually for this we're just gonna come up here and I'm gonna say let progress is equals to zero just to set this outside because it's gonna make life easier for when we do the simulated one. But we're gonna say that my data set we're just going to 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 we can even console log that console log progress. Hit save and then when let's just open up my console any of these that I click on you can see 25, 57, 100 and this one will be fake upload because we're gonna set that one up as a fake upload as well. And so there we go we're getting those values. What do we wanna do with those though is rather than console logging things obviously we wanna do something with it. So we're just gonna say that we're gonna take the progress bar we're gonna set the attribute area of 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. Kinda cool. Again, this part would be a little bit different but this part is exactly what you'd wanna be doing where you're updating the area of value now with your JavaScript to whatever the progress actually is just how you're calculating that progress would be a little bit different. The other thing here is just because I have put the let progress as a zero here because that makes sense right that we're progress is starting at zero. I'm just gonna put this here as my progress just because then maybe there's something else that's updating this and then you're wanting to pull in that other value whatever it is but that just makes sense to me. So we're gonna set it up like that for now to get the simulated one to work is a little bit different but we're not gonna 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. With our background here instead of doing a background of blue because that's not really very helpful 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 gonna 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 gonna make it look the way we needed it to. I will caveat this with I took this approach because in the design that Andy provided for this these lines were straight. If those were curved edges I'd be using an SVG instead because you can draw along. So if you had an SVG that's like the circle here you'd have it as the stroke and using stroke dash array with the end caps being round and then you can 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 even with these straight caps if you went with an SVG or that's where your mind went perfectly fine, no problem at all but for me just seeing those straight edges there right away I thought of a conic gradient so that's how I'm doing it. So my background here will be as I said a conic gradient so we just say conic gradient and I'm gonna 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 I have the actual colors as custom properties I was gonna do other colors but you might as well use them we have a color dark let's just do one, it won't work okay we need, oh maybe like that no we need two colors so first color will be dark and then let's do a var of it's our color dark layer 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 gonna start and it's gonna 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 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 gonna 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 write the area value now and if that could work that would just be absolutely amazing and sadly we can't do that yet so to solve that I'm going to put a custom property here so we're gonna do a var of progress and we're just gonna give this a zero as the default so by default where we have nothing no progress at all but if this gets set somewhere it's going 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 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 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 I did something wrong but now whatever our percentage is at it's matching it along the way and I think it looks pretty good it works I'm happy with that the harder part now is it's not really hard but we need a checkbox when we're in our completed state so when we get to 100% we don't want it to be 100 we want it to be this instead so to be able to do that I'm actually going to make a change or a bit of an update here where I'm going to pull this out from being here just because I'm going to set up the simulated one too I'm not going to go through all the code that I have here but I will put a link in the description if you want to check it out and explore it which is basically the same thing we had before the only real big difference is I've added this simulate upload and I broke up this update progress so here we're simulating progress which gets passed into here which updates our progress it's exactly the same steps it's just basically 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 set things up in a second the one thing I want to say here with this is I have included this area busy here and this just means like as the number is going up and as I mentioned before there's the area polite as well what the area busy means 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 if you're using a screen reader it's not going to say like 5, 10, 15, 20, 25, 30 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 but otherwise just because you would be kind of annoying if not right so I'm including that there just to mention it along the way and I just realized here it says data busy want that to be area busy not data busy with that in place now 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 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 because I wasn't I want to make it really clear what we're doing but I'm not sure if we could so it's our role is equal to progress bar and keep that then also if we have a area and it was our value now right value now is equal to 100 so the very 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 product 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 yay for now 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 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 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 click over but there's a problem or actually we'll see the problem 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 any gradient is a background image and you can't animate background images 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 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 and I think maybe nightly it's coming in Firefox anyway so browser support will be pretty good and again 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 we have different states it won't animate to that state it's just going to sort of happen where 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 app property and we want to get the name that we're doing so it was progress this is basically what we're doing is we're actually registering our custom property and giving a bit more information 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, 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 because it's like this where you do syntax quotation marks and then the triangle brackets and there's different stuff here you can have a number 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 that's one of them I just go in the MDM they have a list of all of them I'll put a link to it down below to figure out what I want there because there's lots of different choices we have an inherits so do you want it to inherit or not? I'm going to put false doesn't seem to be something that probably should inherit but you can put it to true if you want it to and what's the initial value? initial value will be 0% because we want it to start at 0% you can see my syntax highlighting is pretty terrible here within VS Code I'm sure I can get an extension or something and at one point they will have to improve on this but 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 here I can do a transition and 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 spilt initial wrong which is partially maybe why I may no, it still doesn't look good 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 speed up and slow down as it's going through this 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 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 where we have this SVG that's right here I'm going to right click on it I'm going to do copy as SVG 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 a way to get the base 64 encoding of an SVG so I can paste it in my SVG I'm actually going to change the color of it that we have right here to we have the custom properties set up this is sadly where we can't use the custom property because of how this is going to be used just because we want this value and I'm going to 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 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 off-center and I played around with this a lot and I actually just had to modify my SVG quite a bit to get it to work so I'm just I just made changes from the original one here with my view box numbers and just to be able to sort of change the positioning and mucked around with it a bit so I'm 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 but and it works and we got we get there in the end which is good but again when we get to the hundred percent we don't want like I'm at zero and I get there I want that circling animation to finish before it turns into the check box 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 key frames and make a little animation and we're going to call it progress complete and progress complete is this going to have two so you could also have that as a hundred percent 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 zero seconds to happen and we can't really animate these anyway so the background color I guess could be animated but I'm just going to do it as a zero 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 a thousand milliseconds so now if I'm at fifty seven percent and then we go up to a hundred it gets there and then it switches over or if we're at zero we go all the way up it says a hundred percent and then it switches over I did this is and you can probably use a custom property got another thing here but I did a thousand here just because I was using 500 so it's giving it a half second where we see the hundred percent before it switches over so you could play around with those numbers you could set this as a custom property and then use a calc to like have it as double or triple the amount of time whatever you want would work 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 a hundred percent 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