[gitg/wip/techlivezh/diff-progress-bar: 10/10] Show diff loading progress

[Techlive Zheng <techlivezh src gnome org>]

commit 03aafdef4395e40afb1654d286b182609d01216e
Author: Techlive Zheng <techlivezheng gmail com>
Date:   Thu Dec 19 19:34:46 2013 +0800

    Show diff loading progress
    
    https://bugzilla.gnome.org/show_bug.cgi?id=720736

 libgitg/resources/diff-view.css |   49 +++++++++++++++++++++++++++++++++++++++
 libgitg/resources/diff-view.js  |    5 ++++
 2 files changed, 54 insertions(+), 0 deletions(-)
---
diff --git a/libgitg/resources/diff-view.css b/libgitg/resources/diff-view.css
index d2dc7e9..722ba23 100644
--- a/libgitg/resources/diff-view.css
+++ b/libgitg/resources/diff-view.css
@@ -254,4 +254,53 @@ span.hunk_header, span.file_path {
   color:black;
 }
 
+ keyframes animate-stripes {
+  100% {
+    background-position: -100px 0px;
+  }
+}
+
+ -webkit-keyframes animate-stripes {
+  100% {
+    background-position: -100px 0px;
+  }
+}
+
+progress[value] {
+  /* Reset the default appearance */
+  appearance: none;
+  -webkit-appearance: none;
+  width: 250px;
+  height: 20px;
+}
+
+progress[value]::-webkit-progress-bar {
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
+  border-radius: 2px;
+  background-color: #eee;
+}
+
+progress[value]::-webkit-progress-value {
+  position: relative;
+  border-radius: 2px;
+  background-size: 35px 20px, 100% 100%, 100% 100%;
+  background-image:
+    -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0, 0, 0, .1) 66%, 
transparent 66%),
+    -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)),
+    -webkit-linear-gradient(left, #09c, #09c);
+  animation: animate-stripes 5s linear infinite;
+  -webkit-animation: animate-stripes 5s linear infinite;
+}
+
+progress[value]::-webkit-progress-value::after {
+  content:'';
+  position: absolute;
+  top: 7px;
+  right: 7px;
+  width: 6px;
+  height: 6px;
+  border-radius: 100%;
+  background-color: white;
+}
+
 /* vi:ts=2:et */
diff --git a/libgitg/resources/diff-view.js b/libgitg/resources/diff-view.js
index aa1971d..564c8d5 100644
--- a/libgitg/resources/diff-view.js
+++ b/libgitg/resources/diff-view.js
@@ -163,6 +163,7 @@ function update_diff(id, lsettings)
                        content.innerHTML = '\
                                <div class="loading">\
                                        ' + settings.strings.loading_diff + '\
+                                       <progress value="' + html_builder_tick + '"></progress>\
                                </div>\
                        ';
                }
@@ -178,6 +179,10 @@ function update_diff(id, lsettings)
                else if (event.data.tick)
                {
                        html_builder_tick = event.data.tick;
+                       if($('progress'))
+                       {
+                               $($('progress')[0]).attr('value',html_builder_tick);
+                       }
                }
                else
                {