Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Splash screen while loading main qml

From Wiki
Jump to: navigation, search
Article Metadata
Tested with
SDK: Nokia Qt SDK 1.2
Devices(s): all devices based on Symbian Anna, Nokia Belle
Platform(s): Symbian Anna, Nokia Belle
Device(s): All
Dependencies: Symbian Qt Quick Components 1.1
Platform Security
Capabilities: None
Keywords: Qml, splash screen deffered loading
Created: Den123 (16 Mar 2012)
Last edited: hamishwillee (13 Jun 2012)

To mask lengthy main qml loading process, it might be a good idea to display a splash screen. The following steps demonstrates, how to achieve this aim:

  1. We should load and show one component (init) that contains splash screen
  2. Once splash screen is displayed on the screen, we can load main QML
  3. When the main QML is loaded, we can hide splash screen

Project should contain one more qml-file (init.qml). This file contains splash screen and performs main QML deferred loading.

Source code


import QtQuick 1.1
import 1.1
Item {
id: init
SplashScreen {
id: splash
show: true // show splash
minTimeout: 3000 // show splash at least for 3 sec
image: "gfx/splash.png" // path to splash image
canFinish: false // change to true when main QML will be loaded
z: 100 // highest page.
Loader { // this component performs deferred loading.
id: mainLoader
onStatusChanged: {
if( mainLoader.status == Loader.Ready )
// main page is loaded
// time to hide splash
splash.canFinish = true
Component.onCompleted: {
// splash is already rendered on the screen
// user is looking on splash
// now we can start loader to load main page
mainLoader.source = "main.qml"

The SplashScreen component can be implemented as follows:


import QtQuick 1.1
import 1.1
Rectangle {
id: splash
anchors.fill: parent
color: "black"
property int minTimeout: 3000 // 3s by default.
property string image; // path to splash image
property bool show: false // if show is true then image opacity is 1.0, else 0.0
property bool canFinish: false // if true then we can hide spash after timeout
state: show ? "showingSplash" : ""
onStateChanged: {
if( state == "showingSplash" )
opacity: 0.0
Image {
source: image
fillMode: Image.PreserveAspectFit
anchors.fill: parent
smooth: true
Timer {
id: splashTimer
interval: minTimeout
running: false
repeat: true
onTriggered: {
if( splash.canFinish )
// finally we can stop timer and hide splash = false
splashTimer.repeat = false
// canFinish is false, but main.qml is not loaded yet
// we should run timer again and again
splashTimer.interval = 1000 // 1 sec
splashTimer.repeat = true
states: [
State {
name: "showingSplash"
PropertyChanges { target: splash; opacity: 1.0 }
// hide splash using animation
transitions: [
Transition {
from: ""; to: "showingSplash"
reversible: true
PropertyAnimation { property: "opacity"; duration: 500; }

Do not forget to correct main cpp-file. QmlApplicationViewer should start init.qml, not main.qml.

Related Links

This page was last modified on 13 June 2012, at 10:54.
118 page views in the last 30 days.