Last active
November 10, 2016 17:16
-
-
Save rattanchauhan/c3574f808086825339a070b59191b6ba to your computer and use it in GitHub Desktop.
Adding a loading spinner at app startup in Sencha Architect
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| if(Ext.fly('initialLoader')){ | |
| Ext.fly('initialLoader').destroy(); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html manifest="" lang="en-US"> | |
| <head> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta charset="UTF-8"> | |
| <title>Application name</title> | |
| <!-- The line below must be kept intact for Sencha Command to build your application --> | |
| <script id="microloader" type="text/javascript" src="bootstrap.js"></script> | |
| </head> | |
| <body> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html manifest="" lang="en-US"> | |
| <head> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta charset="UTF-8"> | |
| <title>Application name</title> | |
| <!-- The line below must be kept intact for Sencha Command to build your application --> | |
| <script id="microloader" type="text/javascript" src="bootstrap.js"></script> | |
| </head> | |
| <body> | |
| <div id="initialLoader" class="loader"></div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Application Loading Spinner */ | |
| .loader { | |
| margin: 60px auto; | |
| margin-top: 25%; | |
| font-size: 10px; | |
| position: relative; | |
| text-indent: -9999em; | |
| border-top: 1.1em solid rgba(0,128,255, 0.2); | |
| border-right: 1.1em solid rgba(0,128,255, 0.2); | |
| border-bottom: 1.1em solid rgba(0,128,255, 0.2); | |
| border-left: 1.1em solid #0080ff; | |
| -webkit-transform: translateZ(0); | |
| -ms-transform: translateZ(0); | |
| transform: translateZ(0); | |
| -webkit-animation: load8 1.1s infinite linear; | |
| animation: load8 1.1s infinite linear; | |
| } | |
| .loader, | |
| .loader:after { | |
| border-radius: 50%; | |
| width: 10em; | |
| height: 10em; | |
| } | |
| @-webkit-keyframes load8 { | |
| 0% { | |
| -webkit-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @keyframes load8 { | |
| 0% { | |
| -webkit-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment