Custom Loader In Microsoft Blend

Microsoft Blend is an amazing UI design tool used to create graphical interfaces for web, desktop and store apps.

In this article, we'll see how to design a custom loader in blend using some basic animations. I'll assume you're familiar with interface of Microsoft Blend and know how to perform basic operations.

Here are the steps:

1. Open Microsoft Blend for Visual Studio and create a new project. Select "Blank App (Universal Windows)". Edit name of your project and click OK.
   
   
   
   
2. Choose rectangle from left pane and draw two rectangles, one inside another. Select both rectangles, and increase their StrokeThickness to 10 under Appearance in Properties panel on the right. Then, change their colors using stroke brush in properties panel.
   
   
   
   
3. Select the rectangle, move the cursor to its top left corner and you'll see a curved shape cursor. Use that to rotate both rectangles one by one. It should look like the following image:
   
   
   
   
4. Click on '+' sign under Objects and Timeline in the left panel. A popup will appear, name your storyboard and click OK.
   
   
   
   
5. Let us do some animation. Click on outer rectangle and then click on the Record Keyframe button (right below play button under Objects and Timeline). Drag and drop the orange colored line from 0 to 1 and then rotate the selected rectangle clockwise. Do the same process for second triangle, except rotate that in anti-clockwise direction at the end. Now click the play button under Objects and Timeline, you'll see a nice animated loader. Timeline interface will look something like the following image:
   
   
   
   
6. For more smooth look and feel, you can add some easing functions too. Click on keyframes (grey colored icons in timeline), you'll see easing functions under properties panel on right. Choose any easing function from drop down menu and play again.
   
   
   

Conclusion:

We've covered drawing some basic shapes, adding colors, creating a storyboard, adding keyframes/animations and easing functions. Now you can design some other custom loaders and use them in your app using similar pattern. Use your creative skills, sky is the limit.

• Originally published on TechNet Wiki.