added rotate animation

emscripten/project/purr-data/css/webapp/webapp.css

@@ -294,4 +294,5 @@ li .hr{
 #reload-i{
     font-size: 1em !important;
     cursor: pointer;
+    transition: transform 1s linear;
 }
\ No newline at end of file

emscripten/project/purr-data/index.html

@@ -59,12 +59,14 @@
             <hr />
             <!-- Files section -->
             <div>
-              <div class="d-flex ml-3">
-                <i class="fa fa-folder-open-o text-primary" aria-hidden="true"></i>
-                <h5>Files</h5>
-                <i class="fa fa-refresh ml-auto mt-1 text-primary" id="reload-i" aria-hidden="true" onclick="pdbundle.pdgui.update_file_ls()"></i>
+              <div>
+                <div class="d-flex ml-3 float-left">
+                  <i class="fa fa-folder-open-o text-primary" aria-hidden="true"></i>
+                  <h5>Files</h5>
+                </div>
+                <i class="fa fa-refresh ml-5 mt-1 text-primary inline-block" id="reload-i" aria-hidden="true" onclick="pdbundle.pdgui.update_file_ls()"></i>
               </div>
-
+              
               <div class="text-left" id="sidebar-files">
                 <ul class="ml-3 mt-2" id="file_ls"></ul>
                 <div class="text-secondary text-center" id="file_ls_empty">
@@ -535,6 +537,13 @@
       $(document).ready(function () {
         $("#loading-modal").modal("show", { backdrop: "static", keyboard: false });
       });
+
+      var counter = 0;
+      $('#reload-i').click(function () {
+
+      counter += 360;
+      $('#reload-i').css('transform', 'rotate(' + counter + 'deg)')
+      });
     </script>
 
   </body>