extjs/examples/modern/blackberry/index.html

   1 <!DOCTYPE HTML>
   2 <html manifest="" lang="en-US">
   3 <head>
   4     <meta charset="UTF-8">
   5     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   6     <title>Blackberry 10.3</title>
   7
   8     <style type="text/css">
   9         html, body {
  10             height: 100%;
  11             background-color: #fff
  12         }
  13
  14         @keyframes spin {
  15             0% {
  16                 transform: rotate(0deg);
  17             }
  18
  19             100% {
  20                 transform: rotate(360deg);
  21             }
  22         }
  23
  24         @-webkit-keyframes spinner {
  25             0% {
  26                 -webkit-transform: rotate(0deg);
  27             }
  28
  29             100% {
  30                 -webkit-transform: rotate(360deg);
  31             }
  32         }
  33
  34         #SpinnerContainer {
  35             position: absolute;
  36             top: 0;
  37             left: 0;
  38             bottom: 0;
  39             right: 0;
  40             display: flex;
  41             justify-content: center;
  42             align-items: center;
  43
  44             display: -webkit-box;
  45             -webkit-box-align: center;
  46             -webkit-box-pack: center;
  47         }
  48
  49         #SpinnerContainer .Spinner {
  50             width: 64px;
  51             height: 64px;
  52             /* base64 image blob */
  53             background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxNTUgMTU1IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxNTUgMTU1IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJMYXllcl8xIj4NCgk8Y2lyY2xlIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzk2OTY5NiIgc3Ryb2tlLXdpZHRoPSI2IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGN4PSI3Ny41IiBjeT0iNzcuNSIgcj0iNzQuNSIvPg0KPC9nPg0KPGcgaWQ9IkxheWVyXzIiPg0KCTxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCIgeTE9IjQwLjI1IiB4Mj0iODAuNSIgeTI9IjQwLjI1Ij4NCgkJPHN0b3AgIG9mZnNldD0iNC4wMDAwMDBlLTAyIiBzdHlsZT0ic3RvcC1jb2xvcjojOTY5Njk2Ii8+DQoJCTxzdG9wICBvZmZzZXQ9IjUuNzQwMzc3ZS0wMiIgc3R5bGU9InN0b3AtY29sb3I6IzhFOEU4RSIvPg0KCQk8c3RvcCAgb2Zmc2V0PSIwLjE0NjUiIHN0eWxlPSJzdG9wLWNvbG9yOiM2ODY4NjgiLz4NCgkJPHN0b3AgIG9mZnNldD0iMC4yNDI4IiBzdHlsZT0ic3RvcC1jb2xvcjojNDg0ODQ4Ii8+DQoJCTxzdG9wICBvZmZzZXQ9IjAuMzQ2MSIgc3R5bGU9InN0b3AtY29sb3I6IzJFMkUyRSIvPg0KCQk8c3RvcCAgb2Zmc2V0PSIwLjQ1OTIiIHN0eWxlPSJzdG9wLWNvbG9yOiMxOTE5MTkiLz4NCgkJPHN0b3AgIG9mZnNldD0iMC41ODcxIiBzdHlsZT0ic3RvcC1jb2xvcjojMEIwQjBCIi8+DQoJCTxzdG9wICBvZmZzZXQ9IjAuNzQyMiIgc3R5bGU9InN0b3AtY29sb3I6IzAzMDMwMyIvPg0KCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojMDAwMDAwIi8+DQoJPC9saW5lYXJHcmFkaWVudD4NCgkNCgkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJ1cmwoI1NWR0lEXzFfKSIgc3Ryb2tlLXdpZHRoPSI2IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iDQoJCU0zLDc3LjVDMywzNi40LDM2LjQsMyw3Ny41LDMiLz4NCjwvZz4NCjwvc3ZnPg==');
  54             background-repeat: no-repeat;
  55             background-position: top left;
  56
  57             -webkit-animation: spinner 1s infinite linear;
  58             animation: spin 1s infinite linear;
  59         }
  60     </style>
  61
  62     <script id="microloader" type="text/javascript" src="bootstrap.js"></script>
  63 </head>
  64 <body>
  65 <div id="SpinnerContainer">
  66     <div class="Spinner"></div>
  67 </div>
  68 </body>
  69 </html>