Loading Progress Bar | Figma Animation
1.4K views · 2022-11-30
UI Design
In this tutorial, I will show you how to make Progress Bar in Figma with Figma Interactive Components. Also, you will learn how to create a Loading Progress Bar Animation and use Frames, Create Components, Variants, Prototype, Smart Animate and Figma Loading Animation.
In this video I show you:
00:00 Intro
00:23 Progress Bar UI Design
02:20 Create Variants
04:52 Prototype
======
Watch my others Figma Interactive Components tutorials:
Loading Micro Animation: https://youtu.be/yPUacWZtkKs
Accordion Animation: https://youtu.be/NDA_FPARcDk
Notification Animation: https://youtu.be/vIoDgmZ6OaA
Animated Swipe to Remove: https://youtu.be/YHn18oK9O2E
Audio Message Animation: https://youtu.be/bFYsWYlJ_ns
Button Ripple Effect: https://youtu.be/7absYWUNPaY
Automatic Carousel: https://youtu.be/tXEUK6PJiJg
Circle Progress Bar: https://youtu.be/_eBzKeOsaDs
Sound Wave Animation: https://youtu.be/TeRMRl-3TuM
Dynamic Island Animation: https://youtu.be/yh436YFPOm4
Dropdown Menu List: https://youtu.be/s0wq0oacVbg
Animated Modal Overlay: https://youtu.be/nSIaWj_lj10
Time Picker Animation: https://youtu.be/eCut5wH3LJs
Animated Heart Icon: https://youtu.be/MvQ2xMfR060
Animated Swipe to Delete: https://youtu.be/DuP_Zp2KClk
Floating Action Button (FAB): https://youtu.be/R6Zfp0MI6b8
Pulse Loading Animation: https://youtu.be/Jc5JJvcR-mo
Animated Like Button: https://youtu.be/k2lwD4S5_ts
Search Bar (Keyboard Input Animation): https://youtu.be/Oiav0MXU2sQ
Loading Animation: https://youtu.be/f3PS8Y1fiIY
Animated Countdown: https://youtu.be/1ZZZ4_r0uJM
Interactive Star Rating: https://youtu.be/psl1ar21oC8
Interactive Slider: https://youtu.be/Y1Qu5h6w7CU
Interactive Button: https://youtu.be/-BTCL-vHvRA
Radio Buttons: https://youtu.be/k0D1l3lGs_M
Checkbox: https://youtu.be/0jgvOyS3XsQ
Dropdown Menu: https://youtu.be/e3K5ux4hOao
Input Fields: https://youtu.be/wiBarR5SIRA
Progress Bar: https://youtu.be/gIK-07miFOc
Toggle Switch Button: https://youtu.be/N_0X5rb6miY
======
Don't forget to like, subscribe and turn on notifications to watch new ui ux design videos and figma tutorials
In this video I show you:
00:00 Intro
00:23 Progress Bar UI Design
02:20 Create Variants
04:52 Prototype
======
Watch my others Figma Interactive Components tutorials:
Loading Micro Animation: https://youtu.be/yPUacWZtkKs
Accordion Animation: https://youtu.be/NDA_FPARcDk
Notification Animation: https://youtu.be/vIoDgmZ6OaA
Animated Swipe to Remove: https://youtu.be/YHn18oK9O2E
Audio Message Animation: https://youtu.be/bFYsWYlJ_ns
Button Ripple Effect: https://youtu.be/7absYWUNPaY
Automatic Carousel: https://youtu.be/tXEUK6PJiJg
Circle Progress Bar: https://youtu.be/_eBzKeOsaDs
Sound Wave Animation: https://youtu.be/TeRMRl-3TuM
Dynamic Island Animation: https://youtu.be/yh436YFPOm4
Dropdown Menu List: https://youtu.be/s0wq0oacVbg
Animated Modal Overlay: https://youtu.be/nSIaWj_lj10
Time Picker Animation: https://youtu.be/eCut5wH3LJs
Animated Heart Icon: https://youtu.be/MvQ2xMfR060
Animated Swipe to Delete: https://youtu.be/DuP_Zp2KClk
Floating Action Button (FAB): https://youtu.be/R6Zfp0MI6b8
Pulse Loading Animation: https://youtu.be/Jc5JJvcR-mo
Animated Like Button: https://youtu.be/k2lwD4S5_ts
Search Bar (Keyboard Input Animation): https://youtu.be/Oiav0MXU2sQ
Loading Animation: https://youtu.be/f3PS8Y1fiIY
Animated Countdown: https://youtu.be/1ZZZ4_r0uJM
Interactive Star Rating: https://youtu.be/psl1ar21oC8
Interactive Slider: https://youtu.be/Y1Qu5h6w7CU
Interactive Button: https://youtu.be/-BTCL-vHvRA
Radio Buttons: https://youtu.be/k0D1l3lGs_M
Checkbox: https://youtu.be/0jgvOyS3XsQ
Dropdown Menu: https://youtu.be/e3K5ux4hOao
Input Fields: https://youtu.be/wiBarR5SIRA
Progress Bar: https://youtu.be/gIK-07miFOc
Toggle Switch Button: https://youtu.be/N_0X5rb6miY
======
Don't forget to like, subscribe and turn on notifications to watch new ui ux design videos and figma tutorials