Convert a geometric CSS logo into an animated CSS loader

I would like someone to turn my static logo into an animated CSS loading icon to be used on a HTML5 page with ajax etc. I can provide the logo in a HTML/CSS standalone markup which currently scales based on different sizes from a simple javascript toggle. It currently has no images or animations to form this shape, only CSS transformations. The animation itself must be more complex than just rotating the containing or inner DIV in a 360 wheel. Please observe the shape and provide some of your own ideas on how you will animate the logo. A quick sketch of something would be ideal before starting, unless you can explain your proposal in words. The conditions of the job specifically: - Must animate in style (must not simply be a 360 rotation) - The logo itself must be wrapped in an additional class which starts the animation in an infinite loop, and reverts to default when that class is removed - Must not have bugs in firefox, safari, IE, edge or chrome (recent versions 2+yrs only, i realise older ones dont even support css3). - Animation must work flawlessly under all the rescale sizes in the HTML provided I would additional for: - the animated logo converted into a animated gif in sizes 128x128, 64x64, 48x48, 32x32 with transparency. - if you can condense the CSS and markup of the design to be any cleaner/smaller