How to Make Dynamic Progress Bar | Sketch Tutorial


what’s up everyone my name is Faiz and
welcome back to in my new video and this video is all about could create progress
bar so like if you are working on dashboard designing dashboard and is
having different type of progress bar like a loading bar so this video is
gonna help you a lot this is kind of tricky concept which I’m
gonna teach you right away you can see over here this is my progress bar it it
has dynamic value like I can easily change the value by using tags just
quite simple like this I can increase or decrease the values quite simple like
give you another example like this so much easier like you can handle this
thing by using dynamic symbols so like I have another example like I created
these some kind of fancy and beautiful bar the progress bar status so like you
can see over here this is simple bar which I am using and this one is Iker
which I have created by using symbol and this is this one is what I can I can
modify like this or like this by by using that properties like you can
see also change the color so everything is so much tiny bit and also just go
into the symbol let’s see what what is inside this symbol so I have some bright
colors because I cuz it has few values and this would this progress power the
main question in your mind that how it working what is the hack behind this so
the hike is auto layout so if you don’t know about the auto auto auto layout is
a sketch plug-in that that can help you to meet the stats do it it’s like a
flexbox either it’s like it you can create the
pixel perfect period and it’s so much good so first of all what I did I just
this simple box and add some water radius over here and once again I create
the another color box which is going to feel that bar
by using maths and after this I I add the text over here over here
so what happening when I’m typing the tax it’s moving from left so like if I
if I select it and convert it into the auto layout by clicking on this icon now
you can see it’s a stack group and what what will happen let’s suppose if I type
something over here like this so it will move from the left so like like you can
see so let’s suppose if I type again some value so it’s moving and it’s a max
with this so if I if I max with this this value like this max now it’s move
so it’s quite simple I’m gonna give you the N example that how I created this so
just lets into this sketch with new file first of all just copy this bar because
I am going to save my time and add some border radius like it has and after this
I’m gonna duplicate this one like this because I want to fill the color and I
want to match this layer into this layer and after this I’m gonna add the tags
and in in starting of my rectangle so just select both things and middle line
okay that’s good that’s pretty good and after this what you have to do you have
a two ways like you can simply feel the color over here if you want either you
can do you can create a new rectangle away like this and feel the color like
gradient or whatever like this like the yellow color backticks yeah and
after this what you tend to if you can make this input like color yellow like
this and what you can do you just you can place this one it or this and just
what you can do just do the maths and what what will happen over here so it
will quite easy for you whenever you change the color you can just directly
change the color of your symbol it will automatically reflect so it’s it’s quite
easy and after this just like both values we have both things and just
click on the hack just click on the out of the app so now we have Auto layout
and second thing we are going to make this symbol so like to be a progress bar
like this and after they just just read this and edit this symbol and and paste
inside this power so right now you can see this is the inside the output and
what we have to do just simply drag outside and you will notice it go
outside so what you have to just simply drag inside your headboard and select
both values and create the maths fine and the last thing what you have to do
just select your stack layer and click on the left so what will happen
everything start from the left it will fix in that and now just come back and
just start some value when like I feel feeling it’s good it’s good
so like I can add more value and this also also the the good benefit is of the
colors like if I change the color like any other color if I would like this and
just like this and if I go back and I duplicate this one this bar so I can
easily change the color now see so it’s quite beautiful see so I hope you liked
this tutorial and if you like this tutorial so please hit the like button
and if you are new watching to me please subscribe my channel hit the red button
everything is included in description you can download this file or even you
can download the out of your plug-in so I hope this video is very good for you
and you will learn something to Daddy hack and also I have article on this I
found the article on media I’m sharing with you guys link in description thank
you so much for watching this video thanks a lot see you in next video
thanks

6 comments

Leave a Reply

Your email address will not be published. Required fields are marked *