diff options
| author | Dimitrie Hoekstra <dimitriehoekstra@gmail.com> | 2016-10-11 13:58:21 +0200 |
|---|---|---|
| committer | Dimitrie Hoekstra <dimitriehoekstra@gmail.com> | 2016-10-11 13:58:21 +0200 |
| commit | df9cc28a7c69eff8acb226bd20a3d305f585ae39 (patch) | |
| tree | 83dd4322206847b27771cd587a409a9ad00a5142 | |
| parent | cb4c596058765f74c7699294297833fc6b3f94a7 (diff) | |
| download | gitlab-ce-running-status-icon.tar.gz | |
added subtle running status animation for pipelinesrunning-status-icon
| -rw-r--r-- | app/assets/stylesheets/pages/pipelines.scss | 45 | ||||
| -rw-r--r-- | app/views/shared/icons/_icon_status_running.svg | 9 |
2 files changed, 48 insertions, 6 deletions
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index a2779704eff..68892a49053 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 920d7952eb5..b807658656b 100644 --- a/app/views/shared/icons/_icon_status_running.svg +++ b/app/views/shared/icons/_icon_status_running.svg @@ -1,6 +1,3 @@ -<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> |
