1. #1
    Sencha Premium Member kennym's Avatar
    Join Date
    Aug 2011
    Posts
    30
    Answers
    2
    Vote Rating
    0
    kennym is on a distinguished road

      0  

    Default Answered: How to show Loading Screen

    Answered: How to show Loading Screen


    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

  2. 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>

  3. #2
    Sencha User borryshasian's Avatar
    Join Date
    Feb 2012
    Location
    Singapore
    Posts
    29
    Answers
    2
    Vote Rating
    1
    borryshasian is on a distinguished road

      0  

    Default


    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>

  4. #3
    Sencha Premium Member kennym's Avatar
    Join Date
    Aug 2011
    Posts
    30
    Answers
    2
    Vote Rating
    0
    kennym is on a distinguished road

      0  

    Default


    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.

  5. #4
    Sencha User
    Join Date
    Aug 2011
    Posts
    203
    Answers
    1
    Vote Rating
    8
    allisterf is on a distinguished road

      0  

    Default


    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 Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar