Adds spinner
This commit is contained in:
parent
1ef5b4f710
commit
42de337746
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -5,6 +5,7 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="css/video-js.css" rel="stylesheet">
|
||||
<link href="css/spinner.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
|
|
|
@ -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 [] []
|
||||
]
|
||||
)
|
||||
|
|
Loading…
Reference in New Issue