test_shwasher/front_end/SW.VUE/public/media/logos/loading.svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 200 150" style="boder:1px solid red">
   <style>
      #l1 {
         animation: animation1 1.5s linear infinite;
      }

      #l2 {
         animation: animation1 1.5s linear infinite;
         animation-delay: 0.75s;
      }

      @keyframes animation1 {
         0% {
            color: rgb(51, 154, 57);
            opacity: 1;
         }

         20% {
            color: rgb(51, 154, 57);
            opacity: 0.5;
         }

         30% {
            color: rgb(14, 111, 177);
            opacity: 0.5;
         }

         50% {
            color: rgb(14, 111, 177);
            opacity: 1;
         }

         70% {
            color: rgb(14, 111, 177);
            opacity: 0.5;
         }

         80% {
            color: rgb(51, 154, 57);
            opacity: 0.5;
         }

         100% {
            color: rgb(51, 154, 57);
            opacity: 1;
         }
      }
   </style>
   <symbol id="logo" viewBox="0 0 200 150">
      <symbol id="l" viewBox="0 0 200 150">
         <path d="M40 0 h-20 a20 20 0 0 0 -20 20 v110 a20 20 0 0 0 20 20 h136 
       a3 4 1 0 0 2.25 -5 l-6.75 -15 l-18 -40  q-5 -10 0 -15 l30 -35 h-30 l-30 35  q-5 5 0 15
       l15.25 35 a3 4 1 0 1 -2.25 5  h-92 a5 5 0 0 1 -5 -5 v-105 q2 -18 18 -20" fill="currentColor" />
      </symbol>
      <symbol id="l1" viewBox="0 0 200 150">
         <use href="#l" />
      </symbol>
      <symbol id="l2" viewBox="0 0 200 150">
         <use href="#l" style="transform: translate(100%,100%) rotate(180deg);" />
      </symbol>
      <use href="#l1" style="color: rgb(51, 154, 57);" />
      <use href="#l2" style="color: rgb(14, 111, 177);" />
   </symbol>
   <use href="#logo" width="200" height="150" />
</svg>