kemko/nomad
1
0
Fork 0
mirror of https://github.com/kemko/nomad.git synced 2026-01-01 16:05:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

New loading spinner

Browse Source 
Courtesy of SpinKit: https://github.com/tobiasahlin/SpinKit
This commit is contained in:
Michael Lange
2017-10-03 15:52:03 -07:00
parent 400958b0bc
commit 18ba575368
3 changed files with 83 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ui/app/styles/components.scss
View File

@@ -6,6 +6,7 @@
@import "./components/inline-definitions";
@import "./components/job-diff";
@import "./components/json-viewer";
@import "./components/loading-spinner";
@import "./components/metrics";
@import "./components/node-status-light";
@import "./components/status-text";

71
ui/app/styles/components/loading-spinner.scss Normal file
View File

@@ -0,0 +1,71 @@
.loading-spinner {
width: 40px;
height: 40px;
margin: 100px auto;
.loading-spinner-square {
width: 33%;
height: 33%;
background-color: $primary;
float: left;
animation: loading-spinner-squareGridScaleDelay 1.3s infinite ease-in-out;
}
.loading-spinner-square1 {
animation-delay: 0.2s;
}
.loading-spinner-square2 {
animation-delay: 0.3s;
}
.loading-spinner-square3 {
animation-delay: 0.4s;
}
.loading-spinner-square4 {
animation-delay: 0.1s;
}
.loading-spinner-square5 {
animation-delay: 0.2s;
}
.loading-spinner-square6 {
animation-delay: 0.3s;
}
.loading-spinner-square7 {
animation-delay: 0s;
}
.loading-spinner-square8 {
animation-delay: 0.1s;
}
.loading-spinner-square9 {
animation-delay: 0.2s;
}
}
@-webkit-keyframes loading-spinner-squareGridScaleDelay {
0%,
70%,
100% {
transform: scale3D(1, 1, 1);
}
35% {
transform: scale3D(0, 0, 1);
}
}
@keyframes loading-spinner-squareGridScaleDelay {
0%,
70%,
100% {
transform: scale3D(1, 1, 1);
}
35% {
transform: scale3D(0, 0, 1);
}
}

11
ui/app/templates/partials/loading-spinner.hbs Normal file
View File

@@ -0,0 +1,11 @@
<div class="loading-spinner">
<div class="loading-spinner-square loading-spinner-square1"></div>
<div class="loading-spinner-square loading-spinner-square2"></div>
<div class="loading-spinner-square loading-spinner-square3"></div>
<div class="loading-spinner-square loading-spinner-square4"></div>
<div class="loading-spinner-square loading-spinner-square5"></div>
<div class="loading-spinner-square loading-spinner-square6"></div>
<div class="loading-spinner-square loading-spinner-square7"></div>
<div class="loading-spinner-square loading-spinner-square8"></div>
<div class="loading-spinner-square loading-spinner-square9"></div>
</div>