User Expectations Drives Web Spinner Designs

On account of the natural course of cultural trends within the online space, certain animated motions and patterns displayable on web pages will most likely be associated with particular functions by any user accustomed to using a computer or browsing the web. These associations are ingrained into the collective subconscious of online audiences to the extent that, for example, any text that is underlined will likely be assumed by the average user to constitute a hyperlink to a different part of the website. Since those users would therefore likely hover their cursor above the text and subsequently get jarred when they find that it is not reacting as a hyperlink would, it has long been adopted as common web design practice to avoid underlining any text that is not a hyperlink.

In another trend that has steadily been codified in the minds of both designers and users, the kind of icon design that is most commonly recognized as indicating that something is actively loading is what is called a "web spinner." It typically consists of a circular graphic rotating clockwise, which evidently entered popular usage because the human mind associates clockwise motion with the passage of time. While not all loading icons employ rotary motion, they are more popular than symbols that attempt to convey "progress" by having an element linearly proceed to the right and then cycle back instantly to the left once it reaches the end. Compared to that, rotary animated icons are not forced to display sudden and choppy motions when ending one revolution to begin the next.

Virtually any icon design that suggests a clockwise motion to the observer could suffice as a "loading" graphic even if it is made out of a set of static shapes arranged radially around a central point. Even if the shapes do not actually move, each shape simply needs to light up and then darken in sequence to simulate clockwise motion. To make this spinner design more aesthetically appealing, a given shape can be made to only gradually get darker as the brightest shape continuously moves along its course. For more information click here https://i.redd.it/zyhvq24msju61.gif.