📇How To Make Circular Progress Bar | HTML CSS JavaScript

hey what's up dev welcome back to webdev channel in today's episode you will learn how to create this amazing circular progress bar using html css and a little bit of javascript as always we are gonna create that from scratch with step by step watch the whole thing because by the end of it you will learn how to make it by yourself i think it is a good addition to your portfolio or website let's get started okay there let's start really from scratch with you so now we have our index.html let's create our style.css and last but not least our app.js okay looks like we have the tree of dane let's close this for now the app in the style.js and let's create here our boilerplate let's hit tab a couple of times and you go to the title the title let's say circular progress bar okay a still in the head tag let's have a link connect to a markup.css android script okay pointed to external javascript fire as say here differ it means that the page is going to be load first and then our javascript okay and let's go go to the body and in the bar let's see what you have so far okay let's put side by side looks like we have a blank page let's change that creator first div okay called a skill we have our main div but now let's give the size width 160 and height also 160 so we have a square okay let's give a call so you can see once you can see you can be able to style it okay and let's give the call of origin it's too big let me decrease it a little bit and for the position we want that to be relative okay and our idea is put that right in the middle but right before that let's create our css reset like we always do okay because we don't accept the numbers from safari and different others web browsers okay so let me show you what they offer here two pixels solid and green and as you can see we have matching and padding okay so let's get rid of the machine there is area outside and also the padding padding also zero okay box sizing here we want that to be bottom box and now we can get rid of this all right let's give a background color here pick one that fits your project [Music] okay a3 a d f7 the height is going to be 100 view watch height okay so the fully screen and for the layout is going to be display flex because you want to put that in the middle align item center along the cross axis and now along the main axis okay just like content center and yeah it is right in the mirror okay let's continue with our main container here okay with a skill let me show you just the one and for now you'll know where it is let me get rid of this one this background and let's go back into the html okay and in here let's create the our div outer okay and another one inside is one inner alright now let's type this one first one the outer let's give a size the same as the the main container okay height and width of one six pixels let's give it a border so you can see it that's very important and you have a square well you don't want that we want that round so what the radius let's say 50 and nice all right and now let's go back here and apply this style off to the inner the height in the width is going to be 120 pixel smaller than the outer of course it's gonna be inside of it let's copy and paste it here so you can see and yeah it's not well located okay we have to put that right the mirror let's do that using padding so padding 20 pixels all the way around and it's right in the mirror let's get rid of this because we're gonna replace that using box shadow let's have our box shadow okay it's gonna be six pixels six picks offset and ten pixels blur minus one is spread and for the color here let's have a white okay white and alpha or transparent.15 and the second one here is going to be minus six minus six offset 10 pixels blur minus one is spread and this time the color white okay and the transparency is gonna be dot seven okay we are playing here with black and white and making this nice shadow of our circle let's do the same here in the inner okay let's delete this one and you replace this one by box shadow this one is going to be a little different because it's going to be inside okay it's for the inner if you don't want to type all viewers long i understand that so you can download this from the link down below in the video description okay i would like to say thank you to my patrons they have sex to all the source code of five pages okay this is still a small channel and i really appreciate this support thank you very much okay guys we have this here the outer and the inner and yeah it's looking very nice okay okay and now we're gonna create that number okay for now it's gonna be just a placeholder so id number let's type here six five percent this is gonna be our generate using javascript okay it's just a placeholder for now so we can install this okay so let's grab the number and let's give it a thought weight of 600 all right and also uh a color okay the color here is gonna be this grayish color five five five and the second step here we want to put that right in the mirror guess how let's use the layout display flex okay all right and now i'll highlight the center along the cross axis and along the main axis just like content center and yeah is right in the mirror going back now to our index.html we need to add here our svg okay is that in the aqua at the end that you're gonna use here so this is our svg there's a link down into the description that's gonna send you to our facebook page and you can download for free okay and let's apply some style for now we have to use ugly black circle and we don't want that so let's go design style let's come in here and [Music] try to understand what you have we have the circle for example let's grab this circle here and the field none and yeah you can disappear the stroke let's find a color for now kind of flower blue let's give a width in this case we call that stroke with let's say 20 pixels okay and yeah looks beautiful but we're gonna change that soon okay that's just a placeholder color we're gonna use use this gradient color okay just let me delete this one and instead of that let's have url graduate call and yeah now we have a nice graduate [Music] sofa so good but we have to find a way of put that on the top of our circle okay in order to do that let's have a position absolute of course and from top is zero and for left also zero and yeah the magic is done okay let's make it a little bigger so you can see our nice circle we should now work a little bit with our animation okay let's use the stroke for our svg stroke dash ray four fifth is the full circle and let's also have here the stroke offset okay if you have 100 for example you see that we have this part that's invisible 300 make it bigger 100 smaller 200 300 400 almost we have just this piece so you understood the idea in here [Music] let's set it back to 450 okay and now let's deal with the animation itself okay so down here let's say animation i named okay let's give a time of two seconds it's gonna be linear and forwards we'll talk about animation but we don't have it yet so let's just create it before that let's make this number bigger okay foot size 30 pixels okay and yeah now let's create that animation add keyframes that's the name of the animation a name and at one hundred percent we want to change the stroke dash offset okay let me copy the base here let's save here sometime at one hundred percent we want that to be six five percent so let's make some math here 450 minus 450 times 0.65 and we have us 1 57.5 let's have it here and yeah it works we have six five percent of the circle discovered with our gradient we are in the realm of the javascript with automatic wrappings okay let's start by getting reference to our elements why because this way we can manipulate them okay we can do wherever we want so let's start by get rid of this number and let's grab the id just the id okay so let's grab document get element by id and let's use that ideal number let's grab that okay we grab that now let's save that into a variable let's call that number so yeah now we can do whatever we want let's let the counter be equal zero because we're gonna be increasing that using javascript let's set a interval here inside this let's have a arrow function and let's have an odd counter and let's add one to it okay counter plus equals one another thing we're gonna do let's grab the number use the property inner html back checks dollar sign counter wherever the counter is is what you're gonna see on the left okay as you can see we did it well but that is a problem you can see that the number doesn't stop it keeps going up and up okay so let's use the if-set method if the counter is equal to six five we want to clear the interval we want to stop everything okay else okay else we want to continue add one and also send that to the to the our ui okay so number.html equals counter percent okay let's set your 30. milliseconds and yeah okay guys that's all for today i really hope you like it if you like it you know what to do subscribe and you also click that little bell down below so get notified every time i post a new video bye bye see you in the next one [Music] you

Channel: Web Dev Made Easy

Views: 38,642

Keywords: how to make progress bar, circular progress bar, progress bar animation, neomorphism ui design, neomorphism progress bar, progress bar in html, progress bar in html css, progress bar javascript, web designing, html and css, html and css website design, technology, ui designs, web dev

Id: H2HYccAGR00

Length: 13min 47sec (827 seconds)

Published: Thu Jun 30 2022