A Custom Loading Indicator Using AngularJS

I'm currently writing a web version of my Windows Phone & Windows 8 App 'Food Hygiene Cchecker'. Food Hygiene Checker is an app which used the api provided by the UK Food Standards Agency (http://www.food.gov.uk/) to provide the food hygiene rating of establishments both near their location and throughout the UK.

As this is just a fun home project with no time restraints I thought it would be an ideal opportunity to learn the AngularJS framework.

If course I could have created an animated gif for this but where is the fun in that. I also considered using HTML5 css animation but as I say, I wanted to learn AngularJS and this solution would be more controllable.

The result of my experiment is shown below. It mirrors the custom loader I have in the app versions of Food Hygiene Checker which was created in XAML.




The Javascript, HTML and  CSS can be seen below:


My first foray into AngularJS was very positive indeed, it was similar to the time I discovered jQuery and everything changed. As a next step I plan to package this into a reusable AngularJS component.

AngularJS has a new fan.

Alan

Food Hygiene Checker for Windows Phone

I've just sent the latest version of Food Hygiene Checker for Windows Phone to the store for certification. All being well it'll be in the store in a few days.

I've added quite a lot to this version including the ability to search by keyword both locally and nationally and to view the location of establishments on a map.

I've also created a Windows 8 version of the app which you can download in the Windows Store and plan a web version very soon. I have a few ideas for other features I can add including a 'notify me when this establishment is re-rated' but if you have any ideas I'd love to hear them.

Right, I'm going to have a beer now to celebrate finishing this.

Cheers

Alan