Dynamic Progress Bar & Circle with CSS and JavaScript

hello my friends today i prepared to have some progress bar for you first one is the regular line progress bar and the second one is the circular svg progress bar and they are not just useless designs i know everyone can do this but they are a hundred percent dynamic what i mean by that they are using dynamic percentages i created here a fake percentage and we are using these values and if i change them it's gonna move according to this array and its length let me show this there are 10 items here it means it's gonna take 10 seconds and every second we will use these percentages it's kinda real live data uploading simulation when you upload your files to your server or aws or firebase or whatever during uploading you have some real time percentages and you can integrate them here easily and super quickly so it's gonna be really useful for you i hope you will enjoy this if you are ready let's get started okay firstly what i'm gonna do is creating here a div and it's gonna be progress bar and inside this i'm gonna create another div and it's gonna our progress which is our progress indicator and after this container i'm gonna create a span it's gonna be our loading text let's write here loading for now okay so let's go to style css and give some width and height for this progress bar i will say width 350 pixels and height 50 pixels and i will give some background color something like gray it's gonna be softer of course but first let's check okay so i'm gonna center this container we worked with flexboxes in last two videos i'm gonna use another thing right now i'm gonna use position absolute and if i say here top 0 bottom 0 left 0 and right 0 and when i say margin auto it's gonna be centered maybe i can give some border radius border radius 30 pixels something like that i'm gonna change this color it's gonna be really soft gray something like that but it's too thick i'm gonna change this it's gonna be 10 pixels okay so after this i'm gonna arrange this text i will give some bit and height it doesn't matter we will use this because of absolute positioning i will say font size 30 pixels let's check first okay and i will say again position absolute i can actually copy this and paste here as you can see it's onto this div so i will give some margin here good let's make this progress right now i will come here and say progress and it's gonna be with 10 pixels for now it's going to be changed height will be a hundred percent and background color will be lime green and border reduce again 30 pixels okay if i change here it's gonna be move like that and when it comes to 100 percent it's gonna be 350 pixels or just a hundred percent so i'm gonna use this percentage if i say 10 percent 20 percent 30 it's gonna be a move like that so in the initial state it's gonna be zero so before javascript i can give some pseudo animation here i will say animation move 3 seconds and linear and keyframes this animation name and i'm gonna say to read a hundred percent let's check okay awesome if you want to learn more about these animations you can check the link in the description below you will find an awesome course there so i'm gonna create a javascript file i'm coming here and say app.js and first i should define in the html i will say script and source app.js okay firstly i want to show you something new i will say const interval and set interval and this is a function which we can define our function inside and run this function in specific time i will say here thousand millisecond which means a second and i will come here and say console.log hello let's see inspect console as you can see it writes here hello in every second unless we don't stop it if i say here two second one two one two as you can see it's every two seconds so how i'm gonna stop this i can write here first maybe let i equals zero and in every loop i can say i plus plus and after this i can say if i equals maybe five clear interval and our interval name interval let's check one two three four five and it's stopped so this is how interval works so how i'm gonna use this firstly i want to choose my progress due and my loading span so i'm gonna write here const progress i will say document query selector and i will write my class name progress and i will do the same thing for the loading text it's gonna be loading okay so before starting this interval i'm gonna define here i again it's gonna be zero and const interval or whatever you name it doesn't matter i will say set interval and it's gonna work every one second so i can change this progress style here style with and let's say 50 percent as you can see after one second it shifted to 50 percent of course it should be dynamic so we can increase this every one second so i'm gonna come here and create some fake percentage fake upload percentage and i'm gonna create an array here i'm gonna define some numbers here some percentages 10 percent 25 maybe 40 it can be slowed down after this 60 90 and 100 you can write here whatever you want doesn't matter and i defined one two three four five six seven eight nine ten numbers here so it means it's gonna take 10 seconds because every stage will be one second so if i come here and say instead of this percentage i could write here fake upload percentage and take this first element because i is 0 first and after this i can increase this i and i will write here percent of course let's try as you can see it's moving what we defined in the percentage array awesome and i can change this loading text i will write here loading because we choose here and i will write here inner html and it's gonna be fake upload percentage again and plus percent i can write here same actually okay let's see as you can see our text is changing but as you can see it's undefined right now that because our i number is still increasing there is no stop point so i will come here and say if i equals our fake upload percentage and length right now i can stop this function i will come here and say clear interval and our interval name and here i can write this here and inside i can say maybe complete it let's try perfect but there is a problem here it's shifting to right that's because we defined some specific width and height here so i will make this max content and same let's see right now okay it looks good let's try again so what i did here i said fire this function in every one second and change this style width of this progress according to these numbers in every second this inner html allows us to change our text inside any html item so i write inside fake upload percentage these numbers and percent i can write here whatever i want as you can see okay and when this i reached to a length which is 10 here and this interval will stop and inner html will be completed it's really easy of course it was just a fake one when you create real world application you will take this percentage from your server okay that's all for this line progress bar let's do something more complicated so right now i'm gonna create an svg here let's delete all of this and create an svg i highly recommend you to learn this svg it's the trend technology to create interactive web pages animations you can find a course in the description below also it's really really important to create something animated okay i will give some class name for this also progress and i can indicate my width and height here i will say width 100 pixels and height 100 pixels and inside this svg i'm going to create a circle to do that i'm going to write here circle let's close this and class name will be progress circle and right now i should indicate my starting points on the x-axis and y-axis it's going to be center x and it will start from middle after this svg which is 50 and for y it's going to be same and i should write here some radius it's going to be radius of the circle let's say 30 pixels if we check it right now we can't see anything because there is no color to give some color we are not using background color instead we are gonna use fill let's say red but first i'm gonna comment this out because we are using same class name and here also let's check okay awesome so i don't want to fill this circle instead i'm gonna give some stroke to do that i'm gonna write here transparent and i'm gonna give some stroke let's check again as you can see we have stroke here i can change the color here and give some stroke width it's gonna be five and right now it's thicker okay i can center this it was our progress i will come here and say progress it's gonna be position absolute again and top and bottom and left and right and margin will be auto okay so i wanna write some text inside this circle not here to do that i'm going to svg again and after this circle i'm gonna create a text here and inside i can write here whatever i want let's say okay and class name let's say loading again and font color will be fill blue and i should indicate again x and y axis here where this text is gonna start so i'm gonna write here x 50 again because it's middle after svg and y 50. if i do this as you can see it's not centered it starts from zero and zero but it's going to right side okay let's fix that if i write here text anchor middle it's gonna be centered on horizontal but i should center this also vertically to do that i'm gonna write here alignment baseline middle also and right now it's totally centered i know it's a little bit confused if you don't know anything about svg but it's really important you should learn it you don't have to of course but it's gonna be a big point for your portfolio okay so what was our class name for this circle okay i'm gonna come here and write something new i will say stroke dash array let's say zero and stroke dash offset zero as you can see nothing has changed so how this stroke dash array and dash offset work if i write here 10 as you can see it's our pattern of the dashes if i write here 20 40 100 i'm gonna say 120 50 70 and 80 so it's defining our circumference so how i'm gonna calculate this how am gonna complete this totally to do that you can calculate of course for writing some math circumference and as you can see it's two p and r it's our radius it's p number is a constant and two you can write here and calculate in the objects or you can come here and say basically const circumference and document and query selector and i'm gonna write this class name probably a circle and if i write here get total length [Music] let's write here console.log circumference and let's check here forgot writing here dot okay this is our circumference so if i write here 189 it's gonna be completed so i can use this number so i will use this number here also and let's check this it's totally zero right now it's our offset of our dishes so if i reduce this number let's say 79 69 50 19 something like that as you can see it's growing like that perfect so i can use this number also for the beginning it's gonna be like that which is zero and i don't need this text also i will delete this i will write here with inner html again so everything is okay right now in the html and css let's go to app.js and create our functions so instead of doing it like that i'm gonna copy this and say here const circle and it's gonna be our query selector and here i can write circle like that because i'm gonna use this so after this i can choose my loading text again actually i will use all of these things let's write here okay as you can see our fake upload percentage array is same so let's create this and create some interval here i will say again as we did before interval it's going to be a set interval and again one second and inside this i'm gonna change something inside this circle so i will write here circle and style and what i'm gonna use here i'm gonna use this stroke touch offset so i'm gonna write here stroke dash offset it's not capital of course so what i'm gonna write here remember what we did here we just reduced this number so we should calculate our percentages according to this number it's not like we did this here it can be a little bit confusing if you are not related with math but i'm gonna use this circumference and minus fake upload percentage divided by a hundred and i will just multiply this with circumference this is how we calculate this because for example for the second one we can't write here 10 and we can't write here 179 we should calculate it if it's ten percent we should calculate this percentage for this negative one also anyway don't care about this that much i know it's confusing but you can find this on the internet you can just search on the google you don't have to invent anything new okay let's check so something is wrong here stroke dash offset fake up oh i forgot this item of course and i forgot increasing this i also let's check right now as you can see it works perfectly and when it's come to a hundred percent it's totally completed awesome so i can handle this loading also i will say in our html and it's gonna be fake upload percentage and i plus percent and as you can see it's undefined again because we didn't stop this interval so let's stop this i will say if i equals fake upload percentage length and then i'm gonna stop this interval and also loading in our html and it's gonna be if i write here completed it's gonna overflow so we should write something just short okay that's all let's try perfect let's change this fake upload percentage i will just say 0 10 and maybe 100. as you can see you can write here whatever you want it's totally dynamic it's really awesome and again if you are confused about this svg don't worry i prepared an awesome svg course i highly recommend you to learn this because it's the trend technology every big companies uses svgs and svg animations it's really easy really efficient and super fast and it allows us to create awesome animations without any limit so if you want to check this course you can find in the description below so we finished our tutorial i hope you enjoyed this i would be appreciated if you like this video if you want to see more tutorials like that don't forget to subscribe the channel so i will see you in the next video goodbye you

Channel: Lama Dev

Views: 6,671

Keywords: lama dev, progress bar, progress circle, svg, html, css, javascript, vanilla js, animation, svg animation, css animation, circular progress, svg progress

Id: UCG8JObh0qU

Length: 28min 52sec (1732 seconds)

Published: Sat Mar 06 2021