A music player that connects to your cloud/distributed storage.
Improve loading animation
+54
-47
+19
-5
src/Applications/UI.elm
+19
-5
src/Applications/UI.elm
···
17
17
import Return2
18
18
import Return3
19
19
import Sources
20
-
import Svg.Elements
21
20
import Tachyons.Classes as T
22
21
import UI.Authentication
23
22
import UI.Backdrop
···
29
28
import UI.Reply as Reply exposing (Reply(..))
30
29
import UI.Settings
31
30
import UI.Sources
31
+
import UI.Svg.Elements
32
32
import UI.UserData
33
33
import Url exposing (Url)
34
34
···
347
347
348
348
loadingAnimation : Html msg
349
349
loadingAnimation =
350
-
Html.map never Svg.Elements.spinner
350
+
Html.map never UI.Svg.Elements.loading
351
351
352
352
353
353
···
360
360
-- Body
361
361
-----------------------------------------
362
362
Css.Global.body
363
-
[ Css.backgroundColor (Color.toElmCssColor UI.Kit.colors.background)
364
-
, Css.backgroundImage (url "/images/ep_naturalblack_pattern.jpg")
365
-
, Css.color (Color.toElmCssColor UI.Kit.colors.text)
363
+
[ Css.color (Color.toElmCssColor UI.Kit.colors.text)
366
364
, Css.fontFamilies UI.Kit.defaultFontFamilies
367
365
, Css.textRendering Css.optimizeLegibility
368
366
···
372
370
, Css.property "-moz-osx-font-smoothing" "grayscale"
373
371
, Css.property "font-smoothing" "antialiased"
374
372
]
373
+
374
+
-----------------------------------------
375
+
-- Placeholders
376
+
-----------------------------------------
377
+
, Css.Global.selector "::-webkit-input-placeholder" placeholderStyles
378
+
, Css.Global.selector "::-moz-placeholder" placeholderStyles
379
+
, Css.Global.selector ":-ms-input-placeholder" placeholderStyles
380
+
, Css.Global.selector ":-moz-placeholder" placeholderStyles
381
+
, Css.Global.selector "::placeholder" placeholderStyles
382
+
]
383
+
384
+
385
+
placeholderStyles : List Css.Style
386
+
placeholderStyles =
387
+
[ Css.color (Css.rgb 0 0 0)
388
+
, Css.opacity (Css.num 0.2)
375
389
]
+2
src/Library/Conditional.elm
+2
src/Library/Conditional.elm
+7
-7
src/Library/Svg/Elements.elm
src/Applications/UI/Svg/Elements.elm
+7
-7
src/Library/Svg/Elements.elm
src/Applications/UI/Svg/Elements.elm
···
1
-
module Svg.Elements exposing (blockstackLogo, remoteStorageLogo, spinner)
1
+
module UI.Svg.Elements exposing (blockstackLogo, loading, remoteStorageLogo)
2
2
3
3
import Html.Styled.Attributes as Attributes
4
4
import Svg.Styled as Svg exposing (..)
···
6
6
7
7
8
8
9
-
-- Logos
9
+
-- LOGOS
10
10
11
11
12
12
blockstackLogo : Svg Never
···
60
60
61
61
62
62
63
-
-- Spinner
63
+
-- LOADING ANIMATION
64
64
65
65
66
-
spinner : Svg Never
67
-
spinner =
66
+
loading : Svg Never
67
+
loading =
68
68
svg
69
-
[ class "spinner"
69
+
[ class "loading-animation"
70
70
, height "29"
71
71
, viewBox "0 0 30 30"
72
72
, width "29"
73
73
]
74
74
[ circle
75
-
[ class "spinner-circle"
75
+
[ class "loading-animation__circle"
76
76
, cx "15"
77
77
, cy "15"
78
78
, fill "none"
+24
-32
src/Static/Css/Application.css
+24
-32
src/Static/Css/Application.css
···
1
-
:root {
2
-
--placeholder-color: black;
1
+
body {
2
+
background-color: rgb(2, 7, 14);
3
+
background-image: url(/images/ep_naturalblack_pattern.jpg);
3
4
}
4
5
5
6
6
7
7
-
/***************
8
-
* Placeholder *
9
-
***************/
10
-
11
-
::-webkit-input-placeholder { color: var(--placeholder-color); opacity: 0.2; }
12
-
::-moz-placeholder { color: var(--placeholder-color); opacity: 0.2; }
13
-
:-ms-input-placeholder { color: var(--placeholder-color); opacity: 0.2; }
14
-
:-moz-placeholder { color: var(--placeholder-color); opacity: 0.2; }
15
-
::placeholder { color: var(--placeholder-color); opacity: 0.2; }
16
-
17
-
18
-
19
8
/***********
20
-
* Spinner *
9
+
* Loading *
21
10
***********/
22
11
23
-
.spinner {
24
-
animation: spinner-rotator 1.4s linear infinite;
12
+
.loading-animation {
13
+
animation: loading-rotator 2s linear infinite;
25
14
}
26
15
27
16
28
-
.spinner-circle {
29
-
animation: spinner-dash 1.4s ease-in-out infinite,
30
-
spinner-colors 5.6s ease-in-out infinite;
31
-
stroke-dasharray: calc(30 * 2.875);
17
+
.loading-animation__circle {
18
+
animation: loading-dash 1.5s ease-in-out infinite,
19
+
loading-colors 6s ease-in-out infinite;
20
+
stroke-dasharray: 1, 86.25;
32
21
stroke-dashoffset: 0;
33
22
transform-origin: center;
34
23
}
35
24
36
25
37
-
@keyframes spinner-rotator {
26
+
@keyframes loading-rotator {
38
27
0% { transform: rotate(0deg); }
39
-
100% { transform: rotate(270deg); }
28
+
100% { transform: rotate(360deg); }
40
29
}
41
30
42
-
@keyframes spinner-colors {
43
-
0% { stroke: rgb(239, 97, 85); }
31
+
32
+
@keyframes loading-colors {
33
+
0% { stroke: rgb(248, 164, 167); }
44
34
25% { stroke: rgb(254, 196, 24); }
45
35
50% { stroke: rgb(72, 182, 133); }
46
36
75% { stroke: rgb(6, 182, 239); }
47
-
100% { stroke: rgb(239, 97, 85); }
37
+
100% { stroke: rgb(248, 164, 167); }
48
38
}
49
39
50
-
@keyframes spinner-dash {
40
+
41
+
@keyframes loading-dash {
51
42
0% {
52
-
stroke-dashoffset: calc(30 * 2.875);
43
+
stroke-dasharray: 1, 86.25;
44
+
stroke-dashoffset: 0;
53
45
}
54
46
50% {
55
-
stroke-dashoffset: calc((30 * 2.875) / 4);
56
-
transform: rotate(135deg);
47
+
stroke-dasharray: 64.6875, 86.25;
48
+
stroke-dashoffset: -21.5625;
57
49
}
58
50
100% {
59
-
stroke-dashoffset: calc(30 * 2.875);
60
-
transform: rotate(450deg);
51
+
stroke-dasharray: 64.6875, 86.25;
52
+
stroke-dashoffset: -86.25;
61
53
}
62
54
}
+2
-3
src/Static/Html/Application.html
+2
-3
src/Static/Html/Application.html
···
19
19
20
20
<!-- Stylesheets -->
21
21
<link rel="stylesheet" href="/vendor/tachyons.css">
22
-
22
+
<link rel="stylesheet" href="/application.css">
23
23
<link rel="stylesheet" href="/fonts.css">
24
-
<link rel="stylesheet" href="/application.css">
25
24
26
25
</head>
27
26
<body class="min-vh-100 overflow-hidden">
···
58
57
<!-- Insert loader -->
59
58
<script>
60
59
document.getElementById("elm").innerHTML =
61
-
'<div class="flex items-center justify-center min-vh-100"><svg class="spinner" height="29" width="29" viewbox="0 0 30 30"><circle class="spinner-circle" cx="15" cy="15" fill="none" r="14" stroke-linecap="round" stroke-width="2"></circle></svg></div>'
60
+
'<div class="flex items-center justify-center min-vh-100"><svg class="loading-animation" height="29" width="29" viewbox="0 0 30 30"><circle class="loading-animation__circle" cx="15" cy="15" fill="none" r="14" stroke-linecap="round" stroke-width="2"></circle></svg></div>'
62
61
</script>
63
62
64
63