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:

Comments

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