Change Details

There's a range of different loading indicators in our products. --- Content translation - loading article (content). [[ http://codepen.io/anon/pen/VYYvXM | Live example ]] · [[ https://trello.com/c/2u8W6qn8/53-consistent-load-more-animation-in-core | Discussion ]] {F3067365} Echo - loading notifications (content) {F3067366} Flow - loading more topics (content) {F3067367} Mobile - loading "nearby" articles (content) {F3067368} Visual Editors - loading tool (tool) {F3067369} Flow - loading contents on infinite scroll {F3068028} --- **Side notes:** - User:Splarka has done some analysis [[ https://www.mediawiki.org/wiki/User:Splarka/Throbber | here ]] to see how loaders work in different colored backgrounds. - Relevant [[ https://phabricator.wikimedia.org/T95137 | task about loading indicators should accelerate as it nears completion ]] - {T78062} --- === Standardized UI elements === 1. **Three (bouncing) dots** for in-view loading content, for example RCFilters [[ https://codepen.io/Volker_E/pen/yqNXMe | CodePen with dots indicator example at 16px ]]. Depending on context product designers can also choose to go for 12px dot sizes. 2. **Loading progress bar** as application loading indicator, for example VisualEditor [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#Progress-bar | OOUI Progress bar widget ]]

There's a range of different loading indicators in our products. Let's unify them. **Content translation** - loading article (content). {F3067365} **Notifications** - loading notifications (content) {F3067366} **Structured Discussion** - loading more topics (content) {F3067367} loading contents on infinite scroll {F3068028} **MobileFrontend** - loading "nearby" articles (content) {F3067368} **VisualEditor** - loading tool (tool) {F3067369} --- **Side notes:** - User:Splarka has done some analysis [[ https://www.mediawiki.org/wiki/User:Splarka/Throbber | here ]] to see how loaders work in different colored backgrounds. - Relevant [[ https://phabricator.wikimedia.org/T95137 | task about loading indicators should accelerate as it nears completion ]] - {T78062} --- === Standardized UI elements === 1. **Three (bouncing) dots** for in-view loading content, for example RCFilters [[ https://codepen.io/Volker_E/pen/yqNXMe | CodePen with dots indicator example at 16px ]]. Depending on context product designers can also choose to go for 12px dot sizes. 2. **Loading progress bar** as application loading indicator, for example VisualEditor [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#Progress-bar | OOUI Progress bar widget ]]

There's a range of different loading indicators in our products. ---Let's unify them. **Content translation** - loading article (content). [[ http://codepen.io/anon/pen/VYYvXM | Live example ]] · [[ https://trello.com/c/2u8W6qn8/53-consistent-load-more-animation-in-core | Discussion ]] {F3067365} Echo**Notifications** - loading notifications (content) {F3067366} Flow**Structured Discussion** - loading more topics (content) {F3067367} loading contents on infinite scroll {F3068028} **MobileeFrontend** - loading "nearby" articles (content) {F3067368} **Visual Editors** - loading tool (tool) {F3067369} Flow - loading contents on infinite scroll {F3068028} --- **Side notes:** - User:Splarka has done some analysis [[ https://www.mediawiki.org/wiki/User:Splarka/Throbber | here ]] to see how loaders work in different colored backgrounds. - Relevant [[ https://phabricator.wikimedia.org/T95137 | task about loading indicators should accelerate as it nears completion ]] - {T78062} --- === Standardized UI elements === 1. **Three (bouncing) dots** for in-view loading content, for example RCFilters [[ https://codepen.io/Volker_E/pen/yqNXMe | CodePen with dots indicator example at 16px ]]. Depending on context product designers can also choose to go for 12px dot sizes. 2. **Loading progress bar** as application loading indicator, for example VisualEditor [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#Progress-bar | OOUI Progress bar widget ]]