How to show Loading Screen

**kennym** · 8 Apr 2012, 3:38 PM

I have opened a StackOverflow thread, please read my whole question there and answer either on SO or here.

http://stackoverflow.com/questions/1...sencha-touch-2

borryshasian

See the default index.html file when you generate a Sencha app. It would be much easier if you're just gonna show a static image.
Notice the <div id="appLoadingIndicator">

Code:

<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>MyApp</title>
    <style type="text/css">
        /**
         * Example of an initial loading indicator.
         * It is recommended to keep this as minimal as possible to provide instant feedback
         * while other resources are still being loaded for the first time
         */
        html, body {
            height: 100%;
        }


        #appLoadingIndicator {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -10px;
            margin-left: -50px;
            width: 100px;
            height: 20px;
        }


        #appLoadingIndicator > * {
            background-color: #FFFFFF;
            float: left;
            height: 20px;
            margin-left: 11px;
            width: 20px;
            -webkit-animation-name: appLoadingIndicator;
            -webkit-border-radius: 13px;
            -webkit-animation-duration: 0.8s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: linear;
            opacity: 0.3
        }


        #appLoadingIndicator > :nth-child(1) {
            -webkit-animation-delay: 0.18s;
        }


        #appLoadingIndicator > :nth-child(2) {
            -webkit-animation-delay: 0.42s;
        }


        #appLoadingIndicator > :nth-child(3) {
            -webkit-animation-delay: 0.54s;
        }


        @-webkit-keyframes appLoadingIndicator{
            0% {
                opacity: 0.3
            }


            50% {
                opacity: 1;
                background-color:#1985D0
            }


            100% {
                opacity:0.3
            }
        }
    </style>
    <script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>
</head>
<body>
    <div id="appLoadingIndicator">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

**borryshasian** · 9 Apr 2012, 12:39 AM

See the default index.html file when you generate a Sencha app. It would be much easier if you're just gonna show a static image.
Notice the <div id="appLoadingIndicator">

Code:

<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>MyApp</title>
    <style type="text/css">
        /**
         * Example of an initial loading indicator.
         * It is recommended to keep this as minimal as possible to provide instant feedback
         * while other resources are still being loaded for the first time
         */
        html, body {
            height: 100%;
        }


        #appLoadingIndicator {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -10px;
            margin-left: -50px;
            width: 100px;
            height: 20px;
        }


        #appLoadingIndicator > * {
            background-color: #FFFFFF;
            float: left;
            height: 20px;
            margin-left: 11px;
            width: 20px;
            -webkit-animation-name: appLoadingIndicator;
            -webkit-border-radius: 13px;
            -webkit-animation-duration: 0.8s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: linear;
            opacity: 0.3
        }


        #appLoadingIndicator > :nth-child(1) {
            -webkit-animation-delay: 0.18s;
        }


        #appLoadingIndicator > :nth-child(2) {
            -webkit-animation-delay: 0.42s;
        }


        #appLoadingIndicator > :nth-child(3) {
            -webkit-animation-delay: 0.54s;
        }


        @-webkit-keyframes appLoadingIndicator{
            0% {
                opacity: 0.3
            }


            50% {
                opacity: 1;
                background-color:#1985D0
            }


            100% {
                opacity:0.3
            }
        }
    </style>
    <script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>
</head>
<body>
    <div id="appLoadingIndicator">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

**kennym** · 9 Apr 2012, 2:43 AM

Excellent. Thank you! I haven't suspected that it would that simple.

If you wish to answer on the SO thread, I will be glad to accept your answer there, too.

**allisterf** · 13 Jun 2012, 11:11 PM

This is great - a real help! Thank you!

One quick question....the ref to development.js which is found in the sdk. Are you referencing that instead of the normal sencha-touch-all.js, or as well as?

Does it make any difference where in the head the script comes, or will it run effectively anywhere?

Thanks again!
Allister

Thread: How to show Loading Screen

Thread Tools

Search Thread

Display

Answered: How to show Loading Screen

Posting Permissions