nicer loading spinner (#91)

fixes #29
This commit is contained in:
Rok Garbas 2020-06-11 18:50:53 +02:00 committed by GitHub
parent f3139f56bf
commit 9f3de349e8
Failed to generate hash of commit
2 changed files with 62 additions and 1 deletions

View file

@ -360,7 +360,7 @@ view path title model viewSuccess outMsg =
div [] [ text "" ] div [] [ text "" ]
RemoteData.Loading -> RemoteData.Loading ->
div [] [ text "Loading" ] div [ class "loader" ] [ text "Loading..." ]
RemoteData.Success result -> RemoteData.Success result ->
if result.hits.total.value == 0 then if result.hits.total.value == 0 then

View file

@ -76,3 +76,64 @@ header .navbar.navbar-static-top {
} }
} }
} }
.loader,
.loader:before,
.loader:after {
background: #ffffff;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader {
color: #000000;
text-indent: -9999em;
margin: 88px auto;
position: relative;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 1.5em;
}
@-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
@keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}