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 😊👊

[@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! 😎

[@amandeepkaur-pq1bn]

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

[@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.

[@Eren89164]

That was amazing 👍, love from India❤️

[@FLOWTUTS]

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

[@realmeraj3681]

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

[@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 😃

[@angelovergara]

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

[@ForeverDansky]

Happy to help Angelo!

[@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?

[@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.

[@santhoshsoftware]

thats awesome Dan!!!

[@theanecdotist9853]

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

[@lydiawere]

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

[@arkoprabhobhattacharjee7547]

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

[@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😊❤

[@ahmadkhudai]

Thank you

[@ForeverDansky]

You're welcome Ahmad!

[@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 😊

[@Carcass255CZ]

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

[@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?

[@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

[@avrahamnacher3223]

Great stuff! Keep it up

[@ForeverDansky]

Thanks, will do Avraham!

[@wahidislamjoy9174]

nice presentation sir

[@uxninjaa]

Great trick!

[@aimiliosdiakakis2932]

Very good tutorial!

[@ameyabuty2315]

Thanks, it helped me a lot

[@Alex-np5dx]

10 out of 10 marks🤩🤩🤩

[@md.rahimuddin5057]

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

[@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?

[@mehdionline1]

thanks

[@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.

[@1raskumar]

thank you!

[@ulvinomarov]

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

[@AhmedKhaled-ey2is]

thank you

[@mrag792]

you fulfill my dreams :) thank you very very much

[@Bontelucci]

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

[@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.

[@GeGe-gg3zt]

Thanks!

[@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?

[@eguchiyuuki]

Great

[@viethahoang2409]

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

[@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

[@jermelpierre1994]

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

[@SukiiHon]

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

[@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

[@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.

[@SemageNamalSurendra]

Excellent 😘

[@mohdshahnawazalam9221]

superb

[@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

[@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

[@kasra10]

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

[@ForeverDansky]

Thank you! Cheers!

[@vincybadman871]

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

[@GeGe-gg3zt]

i have the same question -)

[@andycreatives]

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

[@samuxui]

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

[@taimoorkhanvlogs]

Please please make tutorial of How to Create skeumorphism design plz

[@chimed66]

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

[@akshaycreation]

Any solution for gradient border in XD

[@vigneshraja216]

Awesome

[@bradeaton3428]

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

[@Mo-kq4er]

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

[@jigarparmar3597]

Can you show a tutorial using a rectangle?

[@fractalelement857]

1:32 what do you mean by press return ?

[@aeeweb6464]

How export it and use it in html css files ?

[@laizamlathyf5631]

how can you make the progress bar gradient?

[@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 🇯🇲🇯🇲

[@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.

[@beeyoch]

nice tattoo yo

[@agustincastro5813]

do you know how to put ths on android studio?

[@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 :)

[@AmpedUpTech]

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

[@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 😃

[@SquaredbyX]

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

[@nikyabodigital]

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

[@vasekcz]

I gave 1000 like!!!

[@MateusHenrique-ne5el]

Manooooooooooooo, tu e foda

[@Whitepillednazarene]

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

[@elias1410e]

Suena chistoso con el XD XD

[@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.

[@snap-n-shoot]

its supposed to be a wireframing app I thought

[@JulianStiber]

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

[@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

[@dragerstudio]

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

[@digikalaakaar]

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

[@dharmatreasure2919]

🎩 😁 👕👍Great! 👖

[@ForeverDansky]

M T M Nice! A+

[@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.

[@mayabitar1316]

I thought it was figma man 😂

[@dynamichorse9779]

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

[@naveenuday]

hooki dooki

[@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

[@elpibebasado7068]

XD

[@DustyBaker987]

in Russian 👍

[@OlaG-el9zr]

Thanks