RTL, a story of motion and direction — Part 2

Progress bars, in loading content, and in media playback

The direction of the progress bar depends on what the progress bar represents.

Content loading

Content loaders generally should follow the direction of content.

LTR Timeline loader

Timeline loading style clearly demonstrates that content progress load should follow the direction of the content.

RTL Timeline loader

Same concept applies for straight bar content loaders.

A LTR UI progress bar load from LTR.

The progress bar should load RTL in an RTL UI, as it follows the direction of the content.

Side-Scrolling Carousel

Carousels in LTR UI scroll in a left swipe motion.

Carousels in RTL UI translate the motion directly, and scroll with a right swipe motion.


Before deciding what to reflect or mirror for an RTL interface, it’s important to go back a few steps and reconsider what the visual element represents, and what is it trying to communicate. Too often we get caught up in our work that we forget the value and intent behind what we do based on countless hours of past experience.

In the case of RTL UI, at the end of the day, the goal is to translate the intent, not the visual. The visual is merely a byproduct of that process.

Great reads on the subject: