added subtle running status animation for pipelines

df9cc28a · Dimitrie Hoekstra · cb4c5960 · df9cc28a · df9cc28a
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -589,3 +589,48 @@
    fill: $gray-darkest;
  }
 }
+
+.iconrunning{
+  display: inline-block;
+  padding:2px;
+  border-radius: 10px;
+  border:2px solid #35A0D6;
+  transform:scale(.778);
+  position:relative;
+  top: 3px;
+  left: -2px;
+}
+
+.iconrunningpie {
+  position: relative;
+  width: 10px;
+  height: 10px;
+  line-height: 10px;
+  border-radius: 50%;
+  background: white;
+  background-image:
+    linear-gradient(to right, transparent 50%, #35A0D6 0);
+  color: transparent;
+  text-align: center;
+}
+
+@keyframes spin {
+  to { transform: rotate(.5turn); }
+}
+@keyframes bg {
+  50% { background: #35A0D6; }
+}
+
+.iconrunningpie::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 50%;
+  width: 50%; height: 100%;
+  border-radius: 0 100% 100% 0 / 50%;
+  background-color: inherit;
+  transform-origin: left;
+  animation: spin 4s linear infinite,
+             bg 8s step-end infinite;
+  animation-play-state: running;
+  animation-delay: inherit;
+}
--- a/app/views/shared/icons/_icon_status_running.svg
+++ b/app/views/shared/icons/_icon_status_running.svg
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
-  <g fill="#2D9FD8" fill-rule="evenodd">
-    <path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/>
-    <path d="M7,3 C9.209139,3 11,4.790861 11,7 C11,9.209139 9.209139,11 7,11 C5.65802855,11 4.47040669,10.3391508 3.74481446,9.32513253 L7,7 L7,3 L7,3 Z"/>
-  </g>
-</svg>
+<div class="iconrunning">
+  <div class="iconrunningpie"></div>
+</div>