241 lines
4.7 KiB
HTML
241 lines
4.7 KiB
HTML
<html>
|
|
<head>
|
|
<title>Home Assistant Loading Animation</title>
|
|
<style type="text/css">
|
|
/*eg*/
|
|
body {
|
|
background-color: #fff;
|
|
}
|
|
|
|
svg {
|
|
width: 66vw;
|
|
height: 66vh;
|
|
margin-left: 16.666vw;
|
|
margin-top: 16.666vh;
|
|
}
|
|
|
|
/*main-logo*/
|
|
.ha-logo {
|
|
background-color: #fff;
|
|
}
|
|
.ha-logo path,
|
|
.ha-logo .house,
|
|
.ha-logo g > circle {
|
|
fill: none;
|
|
stroke: #038fc7;
|
|
stroke-width: 0.13px;
|
|
stroke-dasharray: 10 0;
|
|
}
|
|
.ha-logo path.house,
|
|
.ha-logo .house.house,
|
|
.ha-logo g > circle.house {
|
|
stroke-width: 0.25px;
|
|
stroke-linejoin: round;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
@keyframes house {
|
|
0% {
|
|
stroke-dasharray: 50 50;
|
|
stroke-dashoffset: -50;
|
|
}
|
|
15% {
|
|
fill: #fff;
|
|
}
|
|
25% {
|
|
fill: #038fc7;
|
|
}
|
|
45% {
|
|
stroke-dashoffset: -100;
|
|
}
|
|
80% {
|
|
stroke-dashoffset: -100;
|
|
}
|
|
73% {
|
|
fill: #038fc7;
|
|
}
|
|
76% {
|
|
fill: #fff;
|
|
}
|
|
100% {
|
|
stroke-dashoffset: -130;
|
|
stroke-dasharray: 50 50;
|
|
}
|
|
}
|
|
@keyframes circut {
|
|
0% {
|
|
stroke: #038fc7;
|
|
stroke-dasharray: 20 20;
|
|
stroke-dashoffset: -20;
|
|
}
|
|
10% {
|
|
stroke: #038fc7;
|
|
}
|
|
15% {
|
|
stroke: #fff;
|
|
stroke-dashoffset: -20;
|
|
}
|
|
50% {
|
|
stroke: #fff;
|
|
stroke-dashoffset: -40;
|
|
}
|
|
70% {
|
|
stroke: #fff;
|
|
}
|
|
80% {
|
|
stroke: #038fc7;
|
|
}
|
|
85% {
|
|
stroke-dashoffset: -40;
|
|
}
|
|
100% {
|
|
stroke-dashoffset: -60;
|
|
stroke-dasharray: 20 20;
|
|
}
|
|
}
|
|
.ha-logo circle {
|
|
animation: nodes 5s linear infinite;
|
|
}
|
|
|
|
.ha-logo .house {
|
|
animation: house 5s ease infinite;
|
|
}
|
|
|
|
.ha-logo .circut {
|
|
stroke-width: .176px;
|
|
animation: circut 5s cubic-bezier(0.7, 0.1, 0.1, 0.9) infinite;
|
|
}
|
|
|
|
@keyframes nodes {
|
|
0% {
|
|
stroke: #fff;
|
|
stroke-dasharray: 0 4;
|
|
}
|
|
25% {
|
|
stroke-dasharray: 0 4;
|
|
}
|
|
40% {
|
|
stroke: #fff;
|
|
stroke-dasharray: 4 0;
|
|
}
|
|
41% {
|
|
fill: none;
|
|
}
|
|
42% {
|
|
fill: #fff;
|
|
}
|
|
55% {
|
|
stroke: #fff;
|
|
fill: none;
|
|
}
|
|
65% {
|
|
fill: #038fc7;
|
|
}
|
|
75% {
|
|
fill: none;
|
|
stroke-dasharray: 4 0;
|
|
}
|
|
83% {
|
|
stroke: #fff;
|
|
}
|
|
85% {
|
|
stroke: #038fc7;
|
|
fill: #038fc7;
|
|
stroke-width: .15px;
|
|
}
|
|
93% {
|
|
fill: none;
|
|
stroke-dasharray: 4 0;
|
|
}
|
|
100% {
|
|
stroke-dashoffset: 2;
|
|
stroke-dasharray: 0 4;
|
|
}
|
|
}
|
|
g circle:nth-child(1n) {
|
|
animation-delay: -0.045s;
|
|
}
|
|
|
|
g circle:nth-child(2n) {
|
|
animation-delay: -0.09s;
|
|
}
|
|
|
|
g circle:nth-child(3n) {
|
|
animation-delay: -0.135s;
|
|
}
|
|
|
|
g circle:nth-child(4n) {
|
|
animation-delay: -0.18s;
|
|
}
|
|
|
|
g circle:nth-child(5n) {
|
|
animation-delay: -0.225s;
|
|
}
|
|
|
|
g circle:nth-child(6n) {
|
|
animation-delay: -0.27s;
|
|
}
|
|
|
|
g circle:nth-child(7n) {
|
|
animation-delay: -0.315s;
|
|
}
|
|
|
|
g circle:nth-child(8n) {
|
|
animation-delay: -0.36s;
|
|
}
|
|
|
|
g circle:nth-child(9n) {
|
|
animation-delay: -0.405s;
|
|
}
|
|
|
|
g circle:nth-child(10n) {
|
|
animation-delay: -0.45s;
|
|
}
|
|
|
|
g circle:nth-child(11n) {
|
|
animation-delay: -0.495s;
|
|
}
|
|
|
|
g circle:nth-child(12n) {
|
|
animation-delay: -0.54s;
|
|
}
|
|
|
|
g circle:nth-child(13n) {
|
|
animation-delay: -0.585s;
|
|
}
|
|
|
|
g circle:nth-child(14n) {
|
|
animation-delay: -0.63s;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<svg class="ha-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
|
|
<path
|
|
class="house"
|
|
d="m 1.9,8.5 0,-3.2 -1,0 4,-4.3 2.2,2.1 0,-0.6 1,0 0,1.7 1,1.1 -1.2,0 0,3.2 z" />
|
|
|
|
<path
|
|
class="circut"
|
|
d="M 5,8.7 5,4 M 5,7.5 6.6,5.9 6.6,4.3 M 5,6.3 3.5,4.9 3.5,4.3 M 6.2,5 6.6,5.4 7,5 m -1.1,1.1 0,0.5 0.5,0 M 4.2,5 l 0,0.5 -0.9,0 m 1.1,1.5 0,0.6 -0.6,0 M 5,8.4 3.6,6.7 M 5,8.4 6,7.5 6.7,7.5 M 4.6,3.6 5,4 5.4,3.6" />
|
|
<g>
|
|
<circle cx="5.5" cy="3.4" r="0.21" />
|
|
<circle cx="4.5" cy="3.4" r="0.21" />
|
|
<circle cx="6.6" cy="4.1" r="0.21" />
|
|
<circle cx="3.5" cy="4.1" r="0.21" />
|
|
<circle cx="4.2" cy="4.8" r="0.21" />
|
|
<circle cx="6.1" cy="4.8" r="0.21" />
|
|
<circle cx="7.1" cy="4.8" r="0.21" />
|
|
<circle cx="6.6" cy="6.6" r="0.21" />
|
|
<circle cx="5.9" cy="5.9" r="0.21" />
|
|
<circle cx="3.2" cy="5.5" r="0.21" />
|
|
<circle cx="3.5" cy="6.5" r="0.21" />
|
|
<circle cx="4.4" cy="6.8" r="0.21" />
|
|
<circle cx="3.6" cy="7.6" r="0.21" />
|
|
<circle cx="6.9" cy="7.5" r="0.21" />
|
|
</g>
|
|
</svg>
|
|
</body>
|
|
</html>
|