1

I have two styles of "indefinite progress" spinner to choose from:

They are both variations of the typical spinner, but The First spins the entire image, while The Second rotates which shade of grey corresponds to which "petal". Which is better from a UX standpoint?

http://jsfiddle.net/5Tg7k/ for those with animation-supporting browsers, or: <svg height="20" width="40"> <g> <!-- Option the First --> <line x1="10" y1="3" x2="10" y2="7" stroke="rgb(0, 0, 0)" stroke-linecap="round" stroke-width="2" /> <line x1="10" y1="3" x2="10" y2="7" stroke="rgb(32, 32, 32)" stroke-linecap="round" stroke-width="2" transform="rotate(-45 10 10)"/> <line x1="10" y1="3" x2="10" y2="7" stroke="rgb(64, 64, 64)" stroke-linecap="round" stroke-width="2" transform="rotate(-90 10 10)"/> <line x1="10" y1="3" x2="10" y2="7" stroke="rgb(96, 96, 96)" stroke-linecap="round" stroke-width="2" transform="rotate(-135 10 10)"/> <line x1="10" y1="3" x2="10" y2="7" stroke="rgb(128, 128, 128)" stroke-linecap="round" stroke-width="2" transform="rotate(-180 10 10)"/> <line x1="10" y1="3" x2="10" y2="7" stroke="rgb(160, 160, 160)" stroke-linecap="round" stroke-width="2" transform="rotate(-225 10 10)"/> <line x1="10" y1="3" x2="10" y2="7" stroke="rgb(192, 192, 192)" stroke-linecap="round" stroke-width="2" transform="rotate(-270 10 10)"/> <line x1="10" y1="3" x2="10" y2="7" stroke="rgb(224, 224, 224)" stroke-linecap="round" stroke-width="2" transform="rotate(-315 10 10)"/> <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 10 10" to="360 10 10" dur="1s" repeatCount="indefinite"/> </g> <g> <!-- Option the Second --> <line x1="30" y1="3" x2="30" y2="7" stroke="rgb(0, 0, 0)" stroke-linecap="round" stroke-width="2" > <animate attributeType="xml" attributeName="stroke" from="#000000" to="#ffffff" dur="1s" repeatCount="indefinite"/> </line> <line x1="30" y1="3" x2="30" y2="7" stroke="rgb(32, 32, 32)" stroke-linecap="round" stroke-width="2" transform="rotate(-45 30 10)"> <animate attributeType="xml" attributeName="stroke" from="#000000" to="#ffffff" begin="0.875s" dur="1s" repeatCount="indefinite"/> </line> <line x1="30" y1="3" x2="30" y2="7" stroke="rgb(64, 64, 64)" stroke-linecap="round" stroke-width="2" transform="rotate(-90 30 10)"> <animate attributeType="xml" attributeName="stroke" from="#000000" to="#ffffff" begin="0.75s" dur="1s" repeatCount="indefinite"/> </line> <line x1="30" y1="3" x2="30" y2="7" stroke="rgb(96, 96, 96)" stroke-linecap="round" stroke-width="2" transform="rotate(-135 30 10)"> <animate attributeType="xml" attributeName="stroke" from="#000000" to="#ffffff" begin="0.625s" dur="1s" repeatCount="indefinite"/> </line> <line x1="30" y1="3" x2="30" y2="7" stroke="rgb(128, 128, 128)" stroke-linecap="round" stroke-width="2" transform="rotate(-180 30 10)"> <animate attributeType="xml" attributeName="stroke" from="#000000" to="#ffffff" begin="0.5s" dur="1s" repeatCount="indefinite"/> </line> <line x1="30" y1="3" x2="30" y2="7" stroke="rgb(160, 160, 160)" stroke-linecap="round" stroke-width="2" transform="rotate(-225 30 10)"> <animate attributeType="xml" attributeName="stroke" from="#000000" to="#ffffff" begin="0.375s" dur="1s" repeatCount="indefinite"/> </line> <line x1="30" y1="3" x2="30" y2="7" stroke="rgb(192, 192, 192)" stroke-linecap="round" stroke-width="2" transform="rotate(-270 30 10)"> <animate attributeType="xml" attributeName="stroke" from="#000000" to="#ffffff" begin="0.25s" dur="1s" repeatCount="indefinite"/> </line> <line x1="30" y1="3" x2="30" y2="7" stroke="rgb(224, 224, 224)" stroke-linecap="round" stroke-width="2" transform="rotate(-315 30 10)"> <animate attributeType="xml" attributeName="stroke" from="#000000" to="#ffffff" begin="0.125s" dur="1s" repeatCount="indefinite"/> </line> </g> </svg>

2

The second one is much lighter on the eye, and much more fluid. The last thing you want is your users being distracted or irritated by the high-speed loading animation.

... though this is a very, very subjective question!

UPDATE Sorry, not really high-speed, just greater movement

| improve this answer | |
  • They are the same speed (1 rev/sec), but the top did look much faster to my eye, too. – Nathan Ringo Jul 11 '14 at 18:51
  • sorry, more like greater movement but it is harsher on the eye :) – Tejas Manohar Jul 11 '14 at 18:52
  • 2
    +1 The first one looks more like a cog spinning. The second one looks more like the rotating of highlighted LEDs. – KnightHawk Jul 11 '14 at 21:01

Not the answer you're looking for? Browse other questions tagged or ask your own question.