From 9f3de349e8b0440c9a9e9c5dfd4c0a6ff51d4e25 Mon Sep 17 00:00:00 2001 From: Rok Garbas Date: Thu, 11 Jun 2020 18:50:53 +0200 Subject: [PATCH] nicer loading spinner (#91) fixes #29 --- src/Search.elm | 2 +- src/index.scss | 61 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 62 insertions(+), 1 deletion(-) diff --git a/src/Search.elm b/src/Search.elm index 4b0b784..bac830c 100644 --- a/src/Search.elm +++ b/src/Search.elm @@ -360,7 +360,7 @@ view path title model viewSuccess outMsg = div [] [ text "" ] RemoteData.Loading -> - div [] [ text "Loading" ] + div [ class "loader" ] [ text "Loading..." ] RemoteData.Success result -> if result.hits.total.value == 0 then diff --git a/src/index.scss b/src/index.scss index 7ccbabf..f1db26a 100644 --- a/src/index.scss +++ b/src/index.scss @@ -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; + } +} +