diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index a2779704eff5ede427fd9fbecf0e15c5ea752679..68892a490538a71c2d8e76f0b4233a0793224073 100644 --- 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; +} diff --git a/app/views/shared/icons/_icon_status_running.svg b/app/views/shared/icons/_icon_status_running.svg index 920d7952eb5c51e3514e039f7fcdfef634181de1..b807658656b11d70da7a8c17a71259e4702f16a3 100644 --- a/app/views/shared/icons/_icon_status_running.svg +++ b/app/views/shared/icons/_icon_status_running.svg @@ -1,6 +1,3 @@ - - - - - - +
+
+