From the course: Prototyping Microinteractions with Adobe Animate

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Progress bar

Progress bar - Adobe Animate Tutorial

From the course: Prototyping Microinteractions with Adobe Animate

Start my 1-month free trial

Progress bar

“

- [Instructor] Progress bars and loaders come in many styles. The most used is a simple bar that fills from left to right as some action occurs in the background. We can build a progress bar using the drawing tools in Animate and package it as a symbol for easy reuse. The first thing we'll do is go ahead and create a new layer above our phone background layer and let's just name this bar. Going over to our toolbar, choose the rectangle tool and what we'll do is have a fill color of white and we want that fill to be about 40% alpha. Stroke, we want to have disabled, so if yours is not disabled, make sure to choose the disabled icon here. With that done, we can then draw out our progress bar. We want to keep it pretty thin just like that. With the progress bar created, we can switch back to the selection tool, select that shape, and choose modify, convert to symbol. Here, we'll create a graphics symbol and we'll name this UI underscore progress. And there we have it. Now to actually…

Contents