#3 - Progress Indicator in Studio

studio/classes/BxDolStudioTemplate.php

@@ -69,8 +69,10 @@ class BxDolStudioTemplate extends BxDolTemplate {
         //--- Add default JS in output
 		$this->addJs(array(
 		    'jquery.js',
+            'jquery.migrate.js',
 		    'jquery.dolPopup.js',
 		    'jquery.ui.position.min.js',
+            BX_DOL_URL_PLUGINS . 'spin.min.js',
 		));
     }
 

studio/template/_header.html

@@ -14,6 +14,32 @@
         <script defer type="text/javascript">
             var sUrlRoot = '<bx_url_root />';
             var sUrlStudio = '<bx_url_studio />';
+            var aSpinnerOpts = {
+                lines: 7, // The number of lines to draw
+                length: 0, // The length of each line
+                width: 8, // The line thickness
+                radius: 7, // The radius of the inner circle
+                corners: 1, // Corner roundness (0..1)
+                rotate: 0, // The rotation offset
+                direction: 1, // 1: clockwise, -1: counterclockwise
+                color: '#165ea1', // #rgb or #rrggbb or array of colors
+                speed: 1, // Rounds per second
+                trail: 60, // Afterglow percentage
+                shadow: false, // Whether to render a shadow
+                hwaccel: false, // Whether to use hardware acceleration
+                className: 'bx-sys-spinner', // The CSS class to assign to the spinner
+                zIndex: 2e9, // The z-index (defaults to 2000000000)
+                top: '10px', // Top position relative to parent in px
+                left: '10px' // Left position relative to parent in px
+            };
+            var aSpinnerSmallOpts = $.extend({}, aSpinnerOpts, {
+                lines: 6,
+                width: 6,
+                radius: 4,
+                color: '#333',
+                top: 'auto',
+                left: 'auto'
+            }); 
         </script>
         __extra_js__
 
@@ -22,4 +48,4 @@
     </head>
 
     <body class="bx-def-font bx-def-color-bg-page bx-std-bg<bx_injection:injection_body_style />" <bx_injection:injection_body /> >
-        <bx_injection:injection_header />
+        <bx_injection:injection_header />