Прогресс бар по контуру фигуры

336

06 сентября 2017, 16:15

Необходимо сделать прогресс бар. Вокруг определенной картинки (в данном случае векторной, пример картинки прикрепил) сделать обводку в виде полоски в 2px голубым цветом которая будет прямо по границе картинки ползти.

Результат решения должен быть не просто анимированная картинка с анимацией рисования, а чтобы можно было выставлять на сколько % закрасить прогресс бар!

<svg fill="#000000" height="100" viewBox="0 0 24 24" width="100" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M0 0h24v24H0z" fill="none"/> 
    <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/> 
</svg>

Answer 1

Из идей только так. Сделать конкретно по периметру не представляю возможным.

.container{ 
  position:relative; 
  width: 110px; 
  height:100px; 
   
} 
.progress{ 
  position:absolute; 
  width:inherit; 
  height:inherit; 
  overflow:hidden; 
  animation-name:progress; 
  animation-duration:5s; 
  animation-iteration-count:infinite; 
} 
svg{ 
  position:absolute; 
  left:5px; 
} 
svg.blue{ 
  transform:scale(1.07, 1.1); 
  overflow:hidden; 
} 
@keyframes progress{ 
  from{ 
    width:0px; 
  } 
  90%{ 
    opacity:1; 
  } 
  to{ 
    width:100%; 
    opacity:0; 
  } 
}

<div class="container"> 
    <div class="progress"> 
      <svg class="blue" fill="#3498db" height="100" viewBox="0 0 24 24" width="100" xmlns="http://www.w3.org/2000/svg"> 
        <path d="M0 0h24v24H0z" fill="none"/> 
        <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/> 
      </svg> 
    </div> 
    <svg class="black" fill="#000000" height="100" viewBox="0 0 24 24" width="100" xmlns="http://www.w3.org/2000/svg"> 
      <path d="M0 0h24v24H0z" fill="none"/> 
      <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/> 
    </svg> 
     
  </div>

Answer 2

Можно вот так, но здесь скорее вопрос к самой свг, потому как у нее "странные пути" и анимация в 5s рисует быстро контуры вокруг самого объекта и внутри объекта, но если сделать "правильную свг", то в приницпе получится то что ожидается:

.wrapper { 
  width: 200px; 
  margin: 30px auto; 
} 
 
path { 
  stroke-dasharray: 1000; 
  stroke-dashoffset: 1000; 
  animation: dash 15s linear alternate infinite; 
} 
 
@-webkit-keyframes dash { 
  from { 
    stroke-dashoffset: 1000; 
  } 
  to { 
    stroke-dashoffset: 0; 
  } 
} 
 
@keyframes dash { 
  from { 
    stroke-dashoffset: 1000; 
  } 
  to { 
    stroke-dashoffset: 0; 
  } 
}

<div class="wrapper"> 
	<svg fill="#000000" height="300" viewBox="0 0 23 28" width="300" xmlns="http://www.w3.org/2000/svg"> 
     
    <path stroke="red" stroke-width="1" d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/> 
</svg> 
</div>

Answer 3

.path { 
  stroke-dasharray: 1000; 
  stroke-dashoffset: 1000; 
  animation: dash 50s linear alternate infinite; 
} 
 
@keyframes dash { 
  from { 
    stroke-dashoffset: 1000; 
  } 
  to { 
    stroke-dashoffset: 0; 
  } 
}

<svg fill="#000000" height="100" viewBox="-1 0 26 26" width="100" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M0 0h24v24H0z" fill="none"/> 
    <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z" 
    stroke="red" 
    stroke-width="1" 
    /> 
    <animate attributeName="stroke-dasharray" attributeType="CSS" 
             from="0% 100%" to="100% 0%" 
             begin="0s" dur="5s"  
             repeatDur ="5s" /> 
</svg> 
 
<svg fill="#000000" height="100" viewBox="-1 0 26 26" width="100" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M0 0h24v24H0z" fill="none"/> 
    <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z" 
    stroke="red" 
    stroke-width="1" 
    /> 
    <animate attributeName="stroke-dasharray" attributeType="CSS" 
             from="0% 10%" to="50% 0%" 
             begin="0s" dur="5s"  
             repeatDur ="5s" /> 
</svg> 
 
<svg fill="#000000" height="100" viewBox="-1 0 26 26" width="100" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M0 0h24v24H0z" fill="none"/> 
    <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z" 
    stroke="red" 
    stroke-width="1" 
    /> 
    <animate attributeName="stroke-dasharray" attributeType="CSS" 
             from="0% 0%" to="100% 100%" 
             begin="0s" dur="5s" /> 
</svg> 
 
<svg fill="#000000" height="100" viewBox="-1 0 26 26" width="100" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M0 0h24v24H0z" fill="none"/> 
    <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z" 
    stroke="red" 
    stroke-width="1" 
    /> 
    <animate attributeName="stroke-dasharray" attributeType="CSS" 
             from="0" to="100%" 
             begin="0s" dur="5s" /> 
</svg> 
 
<br> 
 
<svg fill="#000000" height="100" viewBox="-1 0 26 26" width="100" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M0 0h24v24H0z" fill="none"/> 
    <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z" 
    class="path"  
    stroke="red"  
    stroke-width="1"  
    /> 
</svg>