Introduction
If you think the default Construct 2's preloader doesn't look very professional, good news: the newest Construct 2 release allows for custom preloaders! A new feature added in Release 93 - loader layouts - allows you to make a chosen layout act as a preloader. This layout will be loaded first and then the rest of the game will follow. The loader layout is the place to add some kind of a loading progress indicator. This tutorial will teach you how to create a simple loading bar.
If you want a complete CAPX project to play with, here it is.
Also, I recommend reading Ashley's tutorial, which covers loader layouts more in-depth.
Steps
1. Start a new project (or open an existing one) and create a layout that you want to act as a preloader.
2. Go to project settings and set the Use loader layout parameter to Yes and the First layout parameter to your preloader layout.
3. Create the progress bar object. It could be a sprite or a tiled background. Tiled background would be better for a bar, as it doesn't stretch or shrink as its width changes, but you can use a sprite if you prefer.
4. Scale and position the bar. Remember its width.
5. Create an Every tick event. Add a Set width action for your bar and use the following parameter:
clamp(0, (loadingprogress * [width]), [width])
where [width] is a width of your bar. The clamp expression (which is not really necessary here, but it's a very useful expression to know) ensures the bar will never be too short or too long. The loadingprogress expression tells how much of the game has been loaded. It returns values between 0 and 1 (for example, when the game is 50% loaded, loadingprogress will return 0.5) The event should look something like this:
6. You're done! Oh, don't forget to create an On loading finished event and add an action to go to another layout, make a "Play" button appear etc. You don't want your players to get stuck on the preloader, do you?