How to make a progress bar in MockingBot

An ongoing series of MockingBot tutorials

It mainly takes use of the “state” feature in MockingBot to achieve a progress bar effect.

There are two traits of the “state” feature:

1. The components must be consistent among different states of the same page. You can only add/remove components in the global state. Of course, you can adjust the appearance of components in the way you want, such as size, position, color and visibility.
2. The component transition animation among states is generated automatically by the system.

Now Let’s see how to make “progress bar” step by step：

1. Create one screen(just name it “player”). Make a grey bar, and add the “play”, “back”, and “forward” icons.

2. Duplicate the grey bar, and change the copy bar to yellow. Move it out the screen and adjoin its end to the grey bar’s.

3. Create state 2 in the “state panel”, which can be switched on by clicking the “double-circle” icon beside the screen panel.

In state 2, drag the yellow bar to the exact place of the grey bar. and change the “play” icon to a “pause” icon by choosing the “play” icon and click the “pause” icon in the icon library.

4. Link the “play” icon in the Default state to state 2. Set the transition duration to be “5s”.

5. Done. Have a preview.