Create an animated version of our logo (symbol) for online use

We are (the IT-department of) an online bank.

We want you to make our logo (attached) into an animation, that can be used as a waiting-indicator, to indicate for the user that she needs to wait (like, after clicking a button) . The logo is relatively simple, a black capital letter M with an underscore. See the attached SVG file.

The deliverable from you must be production-ready SVG or CSS (and some Javascript if needed) that we can use on our site. It must work on Mobile Safari, chrome, firefox, Android 5+ browsers, but need not work on ie10 and earlier. We already use jQuery on our site, so you can use that. If you need to use other libraries, please consider their size, as performance is important to us.

We want to be able to use the animation both as a small progress-indicator inside a button (like the buttons here on 99 designs, or the bottom button at http://media02.hongkiat.com/loading…esult.png), and as a larger general wait-indicator. See the attached sketch on how we image the button with wait-indicator.

As the deliverable needs to be production-ready, we need to feel confident that you can deliver this. Feel free to show your work using live code in e.g. Codepen.

We are big believers in standards-based-web design, and a solution that uses standards (CSS3, SVG) will be favored. However, we are also pragmatic, and we hire you because you are better at this than us, so feel free to be creative and/or convince us why solution xyz is better.