Auto-Animate a Circular Progress Bar in Adobe XD

[@Cui_Amita]

omg using the concept of dash is pure genius!!!

[@r-o-b]

Holy crap, my progress indicator demo task has gone from impossible-feeling to easy-peasy. Thanks Dansky!

[@ForeverDansky]

Aha awesome! Glad to hear it Rob 😊👊

[@amandeepkaur-pq1bn]

'Superb' it is so easy I always ran away from tutorials but you make learning so easy :)

[@coderarcher7122]

I experimented on my own and it worked!! I'm very happy as this is my first ever animation made on XD! I created shorter segments, taking time, and it was cool!

[@ForeverDansky]

Awesome! 😎

[@Eren89164]

That was amazing 👍, love from India❤️

[@Chreative427]

Thank you! I'm working on a thermometer mockup and this came at a perfect time

[@ForeverDansky]

Aha awesome! Glad it's helpful Chreative 😃

[@realmeraj3681]

This is my First animated making video seeing....so great

[@angelovergara]

This is so awesome! I would've never have figured this out on my own. Thank you!

[@ForeverDansky]

Happy to help Angelo!

[@rafsan_1.618]

You don't have to make different components, Just increase the Dash size in the next artboard.

[@TheMikenart]

Thanks for this!

[@rafsan_1.618]

@@TheMikenart You're welcome.

[@FLOWTUTS]

Ohh that's really cool ❤ this inspired me to do a tutorial on it in after effects 😊

[@santhoshsoftware]

thats awesome Dan!!!

[@ayo10]

Thank you for this @Dansky. This just saved me a ton of time

[@charlesmoses7724]

Clear and precise. Congratulations, you just made a new subscriber.

[@theanecdotist9853]

Thank you so much, my guy! This was so helpful. You've 'earned' a new subscriber today.

[@arkoprabhobhattacharjee7547]

You, sir, are very kind! What a brilliant, easy-to-follow tutorial! :)

[@lydiawere]

thank you so much Dansky, this tutorial jus made my day.

[@ahmadkhudai]

Thank you

[@ForeverDansky]

You're welcome Ahmad!

[@Alex-np5dx]

10 out of 10 marks🤩🤩🤩

[@wahidislamjoy9174]

nice presentation sir

[@Anonymous-cb6by]

thanks sir i am a developer i am working on a project and it helped me a lot for creating a completing progress bar😊❤

[@ameyabuty2315]

Thanks, it helped me a lot

[@uxninjaa]

Great trick!

[@aimiliosdiakakis2932]

Very good tutorial!

[@avrahamnacher3223]

Great stuff! Keep it up

[@ForeverDansky]

Thanks, will do Avraham!

[@Carcass255CZ]

Thank you. Is it possible do this animations in one artboard?

[@md.rahimuddin5057]

Thank you sir.😍 It's perfect for me.

[@mrag792]

you fulfill my dreams :) thank you very very much

[@adreyy9764]

I'm new here and I have one thing to say: I've seen no person but you who looks like a designer that much. I love your videos!

[@ForeverDansky]

Thanks so much 😊

[@mehdionline1]

thanks

[@fnonaka]

OMG I never imagined to create a ring like that! I used to substract forms + using the pen tool wtf a lot of work! Now, how to do this animation with a "ring" with gradient?

[@viethahoang2409]

this is so smart... why didn't I think of this before :o

[@1raskumar]

thank you!

[@AhmedKhaled-ey2is]

thank you

[@GeGe-gg3zt]

Thanks!

[@eguchiyuuki]

Great

[@sarajones8337]

This is a great video! Could you auto-animate the progress bar to a scrolling text? I assume you would link to the scrolling box instead of the artboard, right?

[@mohdshahnawazalam9221]

superb

[@SemageNamalSurendra]

Excellent 😘

[@neutillius]

May I ask ? Where is the gradient look you've put in cover thumbler of this video.

[@ForeverDansky]

I create the thumbnails in Photoshop, and the effect is mostly solid pink for the rings, with a feathered white brush on one end of the progress bar.

[@neutillius]

@@ForeverDansky tahnks for reply. I'ld like to know any available videos of you includes progres bar ring animated with the gradient end.

[@Bontelucci]

Hi there Dansky, How do we export this for developers? Best way/practice? Thanks so much!

[@jordydejong2960]

Great tutorial as always! One question: is it possible that the colour gradually changes as the progress bar fills up?

[@ForeverDansky]

Hey Jordy, thanks so much! Yes you can change the colour and sometimes get away with it happening during the animation, although sometimes it stands out and is a bit too noticeable. Hopefully colours graduating during an animation is something the XD team will consider adding in future 😋

[@harshkadyan-themanager2688]

actually transforming complete colours is not possible, but you can use a gradients, with multiple colours

[@kasra10]

very nice thanks:))))))))))

[@ForeverDansky]

Thank you! Cheers!

[@ulvinomarov]

Dansky, I think u have to new and cool letter D for ur logo)))) The current is so simple)

[@Favoxhille]

Wouldn't be the same to create states in which the ellipse has different dash/gap settings instead of duplicating the ellipse component over and over?

[@vigneshraja216]

Awesome

[@raveer12]

Hey Dansky , Last step before prototyping, selecting all component and rotation i am giving 0, I can't select 0 in the rotation. Is it for Mac only, i have window only not mac?

[@MrOngtrum1]

how to make Sprite Sheets look like this Adobe Flash CC ?? please tell me !!!! because i think Adobe XD with very much Art Board is very tight document not good i love Sprite Sheets

[@ceruleandream972]

Hi I had a question! What do you do if you want the bar to start from 0? Like blank

[@vanhellsingniko8580]

Really cool but i can't press "0" when all component are selected... I have to do this on each segment...

[@Banzaiiable]

Hey ! If you haven't figured it out yet, set the rotation to any number but 0. Once the rotation is the same for all the instances, you can then set a 0 degree rotation for all components.

[@jnsaba5551]

Hey mate, on the last step before the prototyping phase I can't select 0 in the rotation, it just won't let me :(

[@chaitanyakrishna7069]

Was facing the same issue. Last resort, go to every segment and make the rotation zero. Collectively its not happening for me too.

[@jermelpierre1994]

Do you have to rotate if you are using a hexagon instead of a circle?

[@esk2k5]

could this be done with a clock/timer, starting on 12, with the hand going round and as it does a solid colour follows the hand around to 12

[@samuxui]

Please reproduce this effect in a rectangle, I am not getting the same result. A big hug!

[@moseskarunia]

Hi mate, how do you cast your inner shadow? Afaik it's not possible unless I do some ugly hack.

[@ForeverDansky]

Hey Moses, there isn't a native inner shadow option in XD just yet. I've got a video covering the neumorphism design style going up either this week or next, but in the meantime here's another tutorial that may be useful kzbin.info/www/bejne/pl7Gl2RvnLqrr5Y

[@rauldanielfloresa]

Hey thanks a lot! I have a question on the background gray that you have as part of your setup, What did you used to make is to soft? Looks very nice

[@UnknownUser-re6yg]

It's called neomorphism design. Look it up

[@SukiiHon]

super useful! how can we use this for a shape other than a circle (ex. rounded square box)?

[@hillzdoe]

Yaaay!!! I'm early notification squad where you at? Great video once again Dansky!!!

[@ForeverDansky]

Hillary Lakeman BOOM early squad! Thanks Hillary 👊

[@hillzdoe]

@@ForeverDansky ayyee!!! All the love from JAMAICA 🇯🇲🇯🇲

[@andycreatives]

how can I loop the animation without retracting? the loop goes on in a circular loop?

[@fahadsheikh1513]

You are great budy! your face is same to same my big brother duplicate 😃

[@ForeverDansky]

fahad sheikh Haha thanks 😂

[@fahadsheikh1513]

@@ForeverDansky hahaha every time i watching you i remember my brother his name is waqas he is working in dubai 😃

[@chimed66]

Is it possible to animate with a mask included within the component?

[@Mo-kq4er]

Is there a way we can do this but with a gradient?

[@vincybadman871]

Why didn't you use the actually dash properties to animate instead of multiple individual circles?

[@GeGe-gg3zt]

i have the same question -)

[@akshaycreation]

Any solution for gradient border in XD

[@SquaredbyX]

Instead of duplicating complete art boards, you duplicate the first set over so they keep the same names.

[@jigarparmar3597]

Can you show a tutorial using a rectangle?

[@taimoorkhanvlogs]

Please please make tutorial of How to Create skeumorphism design plz

[@laizamlathyf5631]

how can you make the progress bar gradient?

[@suburbanview]

So after u have fun with XD, what it takes to make it a real website? Let me guess. If u used DW you need to do all over again the process to connect the dots. Or hire a web developer to do the job. Unless you are not the average joe and know html or java.

[@aeeweb6464]

How export it and use it in html css files ?

[@beeyoch]

nice tattoo yo

[@bradeaton3428]

Could you do this with multiple circles loading at the same time within the same artboard?

[@fractalelement857]

1:32 what do you mean by press return ?

[@MateusHenrique-ne5el]

Manooooooooooooo, tu e foda

[@vasekcz]

I gave 1000 like!!!

[@agustincastro5813]

do you know how to put ths on android studio?

[@nikyabodigital]

cant u just animate this by increasing Dash value instead of copy pasting component like what you did here?

[@The00sk00]

Adobe please add remove anchor point tool in the adobe xd without shape close

[@ForeverDansky]

👍

[@ivelina_vk]

You can do that by using Option + Del :)

[@elias1410e]

Suena chistoso con el XD XD

[@JulianStiber]

Thanks, but I guess this Video is obsolete now with the last xD Update 😉

[@Whitepillednazarene]

anybody know how to make this a loading bar in html/css?

[@AmpedUpTech]

Can you teach us how to create an intro animation like you. Thanks. 🙂

[@snap-n-shoot]

its supposed to be a wireframing app I thought

[@naina90jaiswal]

i have followed excatly what youve done... why doesnt my auto animate do the same thing ...

[@naina90jaiswal]

Instead of loading in a flow... it just appears in a fade in effect

[@ForeverDansky]

Hey Naina, that issue usually means there's a problem with the layers, in particular the names might not match between artboards, or perhaps one artboard has the layers grouped, and one doesn't.

[@dragerstudio]

I know this I'm already macked in Android alight Motion

[@margoumix]

Will be Nice if transformed to code :)

[@fahadshakoor9451]

any programmer watching?? is it hard to code?

[@SPGraphics_channel]

Why made so many components, instead of just duplicate the artboard, put dash initial and final on both the components and auto animate the artboard

[@dharmatreasure2919]

🎩 😁 👕👍Great! 👖

[@ForeverDansky]

M T M Nice! A+

[@digikalaakaar]

मैं यह ट्यूटोरियल हिंदी में करता हूं

[@thatguywhoplayschess5283]

Hating Adobe XD right now. It's so hard to come up with this kind of solution, as auto-animate is so poorly developed. This is such a counter intuitive and complex way to do such a simple task... Adobe XD should give the user a wider range of ways to animate stuff, not just "try to guess" with auto-animate. Moreover, with auto-animate the result is just the same of transition too often. The funny part is that Adobe XD is made to design UX, and itself has such a bad UX design.

[@maxpower9393]

Neomorphism or What you Call it... is pretty Weird and super low contrast. IMO it is useless in real applications

[@moseskarunia]

The key is don't overdo it. Like this progress bar. You actually don't need the "gutter" that much, because the actual "bar" is already eye catching enough. The "gutter" is just a nice touch

[@mayabitar1316]

I thought it was figma man 😂

[@elpibebasado7068]

XD

[@dynamichorse9779]

Too much acrobatics for a small animation, XD has to grow fast with animations

[@naveenuday]

hooki dooki

[@DustyBaker987]

in Russian 👍

[@OlaG-el9zr]

Thanks