Angular 2 Material Design Spinner .svg

For loading your Angular 2 app (which can be around 2MB big) is pretty useful to have the material design spinner in .svg. So you can show the loading spinner while the app is loaded. It’s not so cool as <md-spinner></md-spinner> but it’s still pretty straight forward.

The md-spinner is currently available in 4 default material design colors:

md-spinner-deeppurple md-spinner-indigo md-spinner-pink md-spinner-purple

Below is code snippet for svg. You can find out that all the magic happens in CSS3. I have created <circle></circle> first and then make it rotate with rotator animation. Next I have styled the circle with stroke-dasharray and stroke-dashoffset, for the effect of break circle.  In last step I set dash animation, where I use dash-offset and rotation for the “slinky spring” effect.

(File is .xml because github renders .svg)
The loading bar is in progress and will be available soon. You can get md-spinner SVGs on my github page.

Related Post

MacBook wifi issue – OS X keeps reconnecting Last few weeks I was facing annoying wifi problems. My mac was reconnecting every 5 minutes. On top of that BSSID was reseting so I saw BSSID changing...
Right-Click to Translate (Look Up) with Google Tra... If you are not native english speaker, you may be frustrated with default "look up" options you get after selecting a text and right clicking. There a...
Convert HEIC to JPG on Right Click for Free Convert HEIC to JPG on Right-Click In iOS 11 Apple is replacing the JPEG image format with the new HEIC alternative. But what to do when device or p...
PPTP VPN on MAC OS X Sierra, High Sierra and Mojav... PPTP VPN for Mac OS X Introduction PPTP VPN is no longer supported on macOS Sierra and High Sierra and that is just fine, because there are some se...
Right Click to Create New File on Mac OS X TL;DR; Windows has a lot of cons but it has also some pros. One of them is a smooth way to create empty file on right-click. Mac OS doesn't come with...
Free Better Battery Stats and Time Remaining for M... Better Battery Stats and Time Remaining for Mac OS TL;DR; Do you miss the time remaining indicator on your MacBook, MacBook Air, or MacBook Pro? He...
Buy me a coffeeOut of coffee 😱, please help!