From 42de337746e04d2829bab828320699d235530f0d Mon Sep 17 00:00:00 2001 From: Thomas Forgione Date: Sun, 4 Oct 2020 21:09:13 +0200 Subject: [PATCH] Adds spinner --- css/spinner.css | 78 +++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 1 + src/Views.elm | 22 +++++++++++++- 3 files changed, 100 insertions(+), 1 deletion(-) create mode 100644 css/spinner.css diff --git a/css/spinner.css b/css/spinner.css new file mode 100644 index 0000000..9541d3d --- /dev/null +++ b/css/spinner.css @@ -0,0 +1,78 @@ +.lds-spinner { + color: official; + display: inline-block; + position: relative; + width: 80px; + height: 80px; +} +.lds-spinner div { + transform-origin: 40px 40px; + animation: lds-spinner 1.2s linear infinite; +} +.lds-spinner div:after { + content: " "; + display: block; + position: absolute; + top: 3px; + left: 37px; + width: 6px; + height: 18px; + border-radius: 20%; + background: #cef; +} +.lds-spinner div:nth-child(1) { + transform: rotate(0deg); + animation-delay: -1.1s; +} +.lds-spinner div:nth-child(2) { + transform: rotate(30deg); + animation-delay: -1s; +} +.lds-spinner div:nth-child(3) { + transform: rotate(60deg); + animation-delay: -0.9s; +} +.lds-spinner div:nth-child(4) { + transform: rotate(90deg); + animation-delay: -0.8s; +} +.lds-spinner div:nth-child(5) { + transform: rotate(120deg); + animation-delay: -0.7s; +} +.lds-spinner div:nth-child(6) { + transform: rotate(150deg); + animation-delay: -0.6s; +} +.lds-spinner div:nth-child(7) { + transform: rotate(180deg); + animation-delay: -0.5s; +} +.lds-spinner div:nth-child(8) { + transform: rotate(210deg); + animation-delay: -0.4s; +} +.lds-spinner div:nth-child(9) { + transform: rotate(240deg); + animation-delay: -0.3s; +} +.lds-spinner div:nth-child(10) { + transform: rotate(270deg); + animation-delay: -0.2s; +} +.lds-spinner div:nth-child(11) { + transform: rotate(300deg); + animation-delay: -0.1s; +} +.lds-spinner div:nth-child(12) { + transform: rotate(330deg); + animation-delay: 0s; +} +@keyframes lds-spinner { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} diff --git a/index.html b/index.html index 4f9ea66..4a623ac 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ +
diff --git a/src/Views.elm b/src/Views.elm index d5f0944..028e28f 100644 --- a/src/Views.elm +++ b/src/Views.elm @@ -24,7 +24,7 @@ view model = element = case model of Core.Unloaded _ _ _ -> - Element.none + Element.el [ Element.padding 10, Element.centerX ] spinner Core.Loaded m -> viewContent m @@ -487,3 +487,23 @@ groupAux size list acc = List.drop size list in groupAux size groupTail (groupHead :: acc) + + +spinner : Element Core.Msg +spinner = + Element.html + (Html.div [ Html.Attributes.class "lds-spinner" ] + [ Html.div [] [] + , Html.div [] [] + , Html.div [] [] + , Html.div [] [] + , Html.div [] [] + , Html.div [] [] + , Html.div [] [] + , Html.div [] [] + , Html.div [] [] + , Html.div [] [] + , Html.div [] [] + , Html.div [] [] + ] + )