mirror of
https://github.com/mgerb/mywebsite
synced 2026-01-11 02:12:53 +00:00
added loading icon - next step: add sensor stuff and things
This commit is contained in:
17
client/assets/images/loading.svg
Normal file
17
client/assets/images/loading.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="#3598db">
|
||||
<path transform="translate(2)" d="M0 12 V20 H4 V12z">
|
||||
<animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
|
||||
</path>
|
||||
<path transform="translate(8)" d="M0 12 V20 H4 V12z">
|
||||
<animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.2" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
|
||||
</path>
|
||||
<path transform="translate(14)" d="M0 12 V20 H4 V12z">
|
||||
<animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.4" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
|
||||
</path>
|
||||
<path transform="translate(20)" d="M0 12 V20 H4 V12z">
|
||||
<animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.6" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
|
||||
</path>
|
||||
<path transform="translate(26)" d="M0 12 V20 H4 V12z">
|
||||
<animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.8" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />
|
||||
</path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -13,7 +13,7 @@
|
||||
position: absolute;
|
||||
width: 7em;
|
||||
text-align: right;
|
||||
margin-left: -9em;
|
||||
margin-left: -8em;
|
||||
}
|
||||
}
|
||||
.intro {
|
||||
@@ -21,8 +21,8 @@
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
code,
|
||||
pre {
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
@import './utils.scss';
|
||||
|
||||
$linkColor: #3598db;
|
||||
|
||||
html {
|
||||
font-family: 'Roboto Slab', serif;
|
||||
max-width: 100%;
|
||||
@@ -34,10 +37,10 @@ p {
|
||||
}
|
||||
a {
|
||||
background-color: transparent;
|
||||
color: #3598db;
|
||||
color: $linkColor;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: #3598db;
|
||||
color: $linkColor;
|
||||
}
|
||||
}
|
||||
hr {
|
||||
@@ -71,3 +74,8 @@ hr {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.Loading{
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user