Display spinning icon when plugin loads

css/fileinput.css

@@ -9,6 +9,17 @@
  * Year: 2013
  * For more Yii related demos visit http://demos.krajee.com
  */
+.file-loading {
+    top: 0;
+    right: 0;
+    width: 25px;
+    height: 25px;
+    font-size: 999px;
+    text-align: right;
+    color: #fff;
+    background: transparent url('../img/loading.gif') top left no-repeat;
+    border: none;
+}
 .btn-file {
     position: relative;
     overflow: hidden;

css/fileinput.min.css

@@ -1,11 +1,11 @@
 /*!
- * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2013
+ * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2013
  * @package yii2-widgets
  * @version 1.6.0
  *
- * File input styling for Twitter Bootstrap 3.0
+ * File input styling for Bootstrap 3.0
  * Built for Yii Framework 2.0
  * Author: Kartik Visweswaran
  * Year: 2013
  * For more Yii related demos visit http://demos.krajee.com
- */.btn-file{position:relative;overflow:hidden}.btn-file input[type=file]{position:absolute;top:0;right:0;min-width:100%;min-height:100%;font-size:999px;text-align:right;filter:alpha(opacity=0);opacity:0;background:red;cursor:inherit;display:block}.file-caption-disabled{background-color:#eee;cursor:not-allowed;opacity:1}.file-input .btn[disabled],.file-input .btn .disabled{cursor:not-allowed}.file-preview{border-radius:5px;border:1px solid #ddd;padding:5px;width:100%;margin-bottom:5px}.file-preview-frame{display:table;margin:8px;height:160px;border:1px solid #ddd;box-shadow:1px 1px 5px 0 #a2958a;padding:6px;float:left;text-align:center}.file-preview-frame:hover{background-color:#eee;box-shadow:2px 2px 5px 0 #333}.file-preview-image{height:150px;vertical-align:text-center}.file-preview-text{display:table-cell;width:150px;height:150px;color:#428bca;font-size:11px;vertical-align:middle;text-align:center}.file-preview-other{display:table-cell;width:150px;height:150px;font-family:Monaco,Consolas,monospace;font-size:11px;vertical-align:middle;text-align:center}.file-input-new .file-preview,.file-input-new .close,.file-input-new .glyphicon-file,.file-input-new .fileinput-remove-button,.file-input-new .fileinput-upload-button{display:none}.loading{background:transparent url('../img/loading.gif') no-repeat scroll center center content-box!important}.wrap-indicator{font-weight:bold;color:#245269;cursor:pointer}
+ */.file-loading{top:0;right:0;font-size:999px;text-align:right;color:#fff;background:transparent url(../img/loading.gif) top left no-repeat}.btn-file{position:relative;overflow:hidden}.btn-file input[type=file]{position:absolute;top:0;right:0;min-width:100%;min-height:100%;font-size:999px;text-align:right;filter:alpha(opacity=0);opacity:0;background:red;cursor:inherit;display:block}.file-caption-disabled{background-color:#EEE;cursor:not-allowed;opacity:1}.file-input .btn .disabled,.file-input .btn[disabled]{cursor:not-allowed}.file-preview{border-radius:5px;border:1px solid #ddd;padding:5px;width:100%;margin-bottom:5px}.file-preview-frame{display:table;margin:8px;height:160px;border:1px solid #ddd;box-shadow:1px 1px 5px 0 #a2958a;padding:6px;float:left;text-align:center}.file-preview-frame:hover{background-color:#eee;box-shadow:2px 2px 5px 0 #333}.file-preview-image{height:150px;vertical-align:text-center}.file-preview-text{display:table-cell;width:150px;height:150px;color:#428bca;font-size:11px;vertical-align:middle;text-align:center}.file-preview-other{display:table-cell;width:150px;height:150px;font-family:Monaco,Consolas,monospace;font-size:11px;vertical-align:middle;text-align:center}.file-input-new .close,.file-input-new .file-preview,.file-input-new .fileinput-remove-button,.file-input-new .fileinput-upload-button,.file-input-new .glyphicon-file{display:none}.loading{background:transparent url(../img/loading.gif) no-repeat scroll center center content-box!important}.wrap-indicator{font-weight:700;color:#245269;cursor:pointer}

js/fileinput.js

@@ -147,6 +147,7 @@
                 hiddenVal: self.$hidden.val()
             };
             this.options = options;
+            self.$element.removeClass('file-loading');
         },
         listen: function () {
             var self = this;
@@ -415,16 +416,19 @@
         elPreviewStatus: null
     };
 
+    var $input = $('input.file[type=file]'), count = Object.keys($input).length;
+
+    if (count > 0) {
+        $input.addClass('file-loading');
+    }
     /**
      * Convert automatically file inputs with class 'file'
      * into a bootstrap fileinput control.
      */
-    $(function () {
-        var $element = $('input.file[type=file]');
-        if ($element.length > 0) {
-            $element.fileinput();
+    $(document).ready(function () {
+        if (count > 0) {
+            $input.fileinput();
         }
-
     });
 
 })(window.jQuery);