Arc-progress

app/js/directives.js

@@ -3232,6 +3232,49 @@ angular.module('myApp.directives', ['myApp.filters'])
     };
   })
 
+  .directive('myArcProgress', function () {
+    var html = '<svg class="progress-arc" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle class="progress-arc-circle" fill="transparent" stroke-dashoffset="0"></circle><circle class="progress-arc-bar" fill="transparent" stroke-dashoffset="0"></circle></svg>';
+    return {
+      scope: {
+        progress: '=myArcProgress'
+      },
+      link: function  ($scope, element, attrs) {
+        element
+          .html(html)
+          .addClass('progress-arc-wrap');
+
+        var svgEl = element[0].firstChild;
+        var circle = $('.progress-arc-circle', element);
+        var bar = $('.progress-arc-bar', element);
+
+        var width = attrs.width || 40;
+        var radius = width * 0.86;
+        var stroke = width * 0.14;
+        var center = width / 2;
+
+        $(svgEl).attr('width', width);
+        $(svgEl).attr('height', width);
+        circle.attr('cx', center);
+        circle.attr('cy', center);
+        circle.attr('r', radius);
+        circle.css({strokeWidth: stroke});
+
+        bar.attr('cx', center);
+        bar.attr('cy', center);
+        bar.attr('r', radius);
+        bar.css({strokeWidth: stroke});
+
+        var fullLen = 2 * Math.PI * radius;
+        $scope.$watch('progress', function (newProgress) {
+          var progress = newProgress / 100.0;
+          progress = Math.max(0.0, Math.min(progress, 1.0));
+          bar.css({strokeDasharray: (progress * fullLen) + ', ' + ((1 - progress) * fullLen)});
+        });
+
+      }
+    }
+  })
+
   .directive('myScrollToOn', function () {
 
     return {

app/less/app.less

@@ -416,6 +416,62 @@ a {
   }
 }
 
+.progress-arc-wrap {
+  display: block;
+  border-radius: 100%;
+}
+.progress-arc circle {
+  stroke-dashoffset: 0;
+  stroke: rgba(0,0,0,0.3);
+  stroke-width: 3px;
+}
+.progress-arc .progress-arc-bar {
+  stroke: #FFF;
+  transform-origin: center center;
+  transition: stroke-dasharray 500ms linear;
+
+  -webkit-animation:  infinite_rotation 2s linear infinite;
+  -moz-animation:     infinite_rotation 2s linear infinite;
+  -ms-animation:      infinite_rotation 2s linear infinite;
+  animation:          infinite_rotation 2s linear infinite;
+}
+
+/* Infinite rotation */
+@-webkit-keyframes infinite_rotation {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@-moz-keyframes infinite_rotation {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@-ms-keyframes infinite_rotation {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes infinite_rotation {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+
+
 .dropdown-menu {
   border-radius: 2px;
   padding: 0;

app/partials/desktop/full_gif.html

@@ -2,6 +2,14 @@
 
   <div class="img_gif_image_wrap">
 
+    <div class="img_gif_meta" ng-show="!isActive" ng-switch="document.progress.enabled">
+      <div ng-switch-when="true" my-arc-progress="document.progress.percent"></div>
+      <div ng-switch-default class="img_gif_info_wrap">
+        <div class="img_gif_label pull-left">GIF</div>
+        <div ng-if="!document.downloaded" class="img_gif_size pull-right" ng-bind="::document.size | formatSize"></div>
+      </div>
+    </div>
+
     <div ng-if="document.url" ng-show="document.downloaded &amp;&amp; isActive" ng-switch="document.mime_type == 'video/mp4'">
       <video ng-switch-when="true" width="{{document.thumb.width}}" height="{{document.thumb.height}}" loop autoplay class="img_gif_video">
         <source ng-src="{{document.url}}" type="video/mp4">
@@ -12,19 +20,4 @@
 
   </div>
 
-  <div ng-show="!isActive" ng-switch="document.progress.enabled">
-
-    <div ng-switch-when="true" class="img_gif_progress_wrap">
-      <div class="img_gif_progress progress tg_progress">
-        <div class="progress-bar progress-bar-success" ng-style="{width: document.progress.percent + '%'}"></div>
-      </div>
-    </div>
-
-    <div ng-switch-default class="img_gif_info_wrap">
-      <div class="img_gif_label pull-left">GIF</div>
-      <div ng-if="!document.downloaded" class="img_gif_size pull-right" ng-bind="::document.size | formatSize"></div>
-    </div>
-
-  </div>
-
 </a>