Playing with some css loading animations, I’ve noticed that they were absolutely awesome! They were smooth, vectorial and mobile friendly. So I thought about the classic loading animation we all know, the rotating arrows.

Loading Arrows

Loading Arrows

The whole animation is pretty easy and made in two different steps:

– draw the arrow
– rotate it with a line of CSS3

So the most annoying part:  drawing the arrow.


We (me and Lorenzo), divided it in these steps (assuming our arrowhead is an equilateral triangle by the length of X ):

The code is well commented, so if you want to skip this part just look at the code.

–  draw an arc (which is the body)
 POINT A:  at the end of the arc (point E ) find the point at X/2 distance on the perpendicular of the tangent of the point E, and draw a line between  E and A.
–  POINT B:  then  (the most horrific part) find the 2nd point of the arrowhead (look at the code) and draw the line between A and B.
–  POINT C:  do the same as the 2nd step, but in the other direction, and draw the line between B and C.
–  draw the line between C and E.

Arrow with letters

Arrow with letters

Time to make the whole thing rotate with a CSS3 animation:

obviously with some html :

and then the demo:


One Comment

Post a comment
  1. rcass #
    July 25, 2016

    Cool man, thanks for this !

Leave a Reply

Basic HTML is allowed. Your email address will not be published.

Subscribe to this comment feed via RSS

By continuing to use the site, or scrolling, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.