home-assistant loading animation

home-assistant-loading-animation.markdown

home-assistant loading animation

A Pen by Andy Fitzsimon on CodePen.

License.

index.html

<svg 
  class="ha-logo loading" 
  xmlns="http://www.w3.org/2000/svg" 
  viewBox="0 0 10 10">
  <path
    class="house" 
    d="M1.9 8.5V5.3h-1l4-4.3 2.2 
       2.1v-.6h1v1.7l1 1.1H7.9v3.2z"   /> 
  <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>

style.scss

$c1: #fff;
$c2: #038fc7;;
$c3: lighten($c2, 40);
$time: 4s;

/*  lazy placement and background for demo */

body{ background-color: $c1;
  height: 100vh; width: 100vw;
  overflow:hidden;
background-image: radial-gradient(circle, $c2, darken($c2, 10) );
  background-size: cover;
  background-position: 50% 50%;
}
svg {
  width: 66vw; 
  height: 66vh;
  margin-left: 16.666vw;
  margin-top: 16.666vh;
}

/*main-logo*/
.ha-logo {
  path,
  circle {
    fill: none;
    stroke: $c2;
    stroke-width: 0.15px;
    stroke-linejoin: round;
    &.house {
      stroke-linecap: round;
      stroke-width: .2px;
    }  
  }
}

.loading.ha-logo circle { animation: nodes $time linear infinite;}
.loading.ha-logo .house {fill:$c1;animation: house $time ease infinite;}
.loading.ha-logo .circut { animation: circut $time cubic-bezier(.7,.1,.1,.9) infinite;}


@keyframes house {
  0% { stroke-dashoffset: -50; stroke-dasharray: 50 50; stroke:$c3; fill:transparent;}
 45% { stroke-dashoffset: -100; stroke:$c1;}
  50%{stroke:$c1; fill:$c1}
  60%{stroke:$c1; }
  75%{stroke:$c1}
 80% { stroke-dashoffset: -100; fill:$c1;}
100% { stroke-dashoffset: -130; stroke-dasharray: 50 50; stroke:$c3; fill:transparent; }
}

@keyframes circut {
  0% { stroke-dasharray: 20 20; stroke-dashoffset: -20 }
 13% { stroke-dashoffset: -20 }
 50% { stroke-dashoffset: -40 ;}
 85% { stroke-dashoffset: -40 ;  stroke:$c2;}
100% { stroke-dashoffset: -60; stroke-dasharray: 20 20 ; stroke: $c1}
}

@keyframes nodes {
   0% { stroke-dasharray: 0 4 }
  25% { stroke-dasharray: 0 4 }
  35% { stroke-dasharray: 4 0;stroke:$c2 }
  41% { fill: none; }
  42% { fill: $c2; }
  55% { fill: none; stroke:$c2; }
  65% { fill: $c2; stroke:$c2; }
  75% { stroke:$c2; fill: none; stroke-dasharray: 4 0; }
  85% { fill: $c2;stroke:$c2;} 
  93%{fill:none; stroke-dasharray:4 0; stroke-dashoffset:0;stroke:$c3}
 100% { stroke-dashoffset:-4;stroke-dasharray: 0 4; stroke:$c1}
}

@for $i from 1 to 15 {
  .ha-logo circle:nth-child(#{$i}n) {
    animation-delay: $i * -($time * 0.009);
  }
}