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 [] []
+ ]
+ )