Как реализовать лоадер сложной формы с выводом процентов загрузки

Question

В сети и на сайте достаточно большое количество разнообразных примеров круговых циклических лоадеров.

Хочется реализовать, что-то подобное, но c более сложной анимацией и с возможностью менять, при необходимости, на другие формы лоадеров без переписывания значительной части кода, например:

У меня получилась сделать анимацию заполнения сторон шестиугольника. Но необходимо сделать, как на примерах выше, чтобы жёлтая линия была с отступом внутри фигуры. Дополнительно реализовать вывод процентов заполнения.

body{
font-family: 'Open Sans', sans-serif;}
#hex_out {
fill:#4D4D4D;
stroke:gold;
stroke-width:6;
stroke-dasharray:0,600;
}
#txt1 {
fill:#EDEDED;
font-size:50px;
text-anchor:middle;
}

<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="svg1" version="1.1" width="210" height="210" viewBox="0 0 210 210" border="1">
 <circle fill="none" stroke="#746500" stroke-width="3" cx="105" cy="105" r="100"/>
  <path id="hex_out" d="m105 5 86.6 50 0 100L105 205 18.4 155l0-100z" >
    <animate attributeName="stroke-dasharray"  dur="10s" begin="0s" values="0, 600; 600, 0" fill="freeze" />
   </path>
   <text id="txt1" x="50%" y="50%" dy="16">100%</text>
</svg>

Alexandr_TT · Answer 1 · 2020-01-14T13:34:23.923

Наиболее простой путь, чтобы анимация сторон была внутри фигуры, - сделать копию внешней фигуры, меньшего размера и поместить её внутри большой фигуры.

Нарисовать обе фигуры проще всего в векторном редакторе:

Выбрав звезду или многоугольник (на рис. стрелка -1) подводим курсор к центру SVG холста и удерживая Shift рисуем сначала внешнюю фигуру (3), затем внутреннюю (4).
Сохраняем файл, забираем path обоих фигур в другой svg файл.
С помощью getTotalLength() определяем полную длину пути

function TotalLength(){
          var path = document.querySelector('#check');
        var len = Math.round(path.getTotalLength() );
        alert("Длина пути - " + len);
        };

Для внутренней звезды она будет 531px

Ниже полный код анимации лоадера в форме звезды:

var count = $(('#txt1'));
$({ Counter: 0 }).animate({ Counter: count.text() }, {
  duration: 8000,
  easing: 'linear',
  step: function () {
    count.text(Math.ceil(this.Counter)+ "%");
  }
});
var s = Snap('#svg1');
var progress = s.select('#star_ind');
progress.attr({strokeDasharray: '0, 531'});
Snap.animate(0,531, function( value ) {
    progress.attr({ 'stroke-dasharray':value+',531'});
}, 8000);

body{
font-family: 'Open Sans', sans-serif;}

#star_out {
fill:#4D4D4D;
stroke:none;
stroke-width:1;

}
#star_ind {
fill:#4D4D4D;
stroke:#FFD500;
stroke-width:5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="svg1" version="1.1" width="210" height="210" viewBox="0 0 210 210" border="1">

 <circle fill="none" stroke="#746500" stroke-width="3" cx="105" cy="105" r="100"/>


  <path   id="star_out" d="m105 5 29.4 59.5 65.7 9.5-47.6 46.4 11.2 65.5L105 155 46.2 185.9 57.4 120.5 9.9 74.1 75.6 64.5Z" /> 
  <path  id="star_ind"  d="m 105,25 23.51141,47.63932 52.57311,7.639322 -38.04226,37.082038 8.98056,52.36068 L 105,145 57.977178,169.72136 66.957739,117.36068 28.915479,80.278638 81.48859,72.63932 Z" />
 <text id="txt1" x="50%" y="50%" text-anchor="middle" dy="4" font-size="36" fill="#EDEDED">100%</text>

</svg>

Пример анимации звезды двумя линиями

var count = $(('#txt1'));
$({ Counter: 0 }).animate({ Counter: count.text() }, {
  duration: 8000,
  easing: 'linear',
  step: function () {
    count.text(Math.ceil(this.Counter)+ "%");
  }
});

body{
font-family: 'Open Sans', sans-serif;}
#star_out {
fill:#4D4D4D;
stroke:none;
stroke-width:1;
}
#star_ind {
fill:#4D4D4D;
stroke:#FFD500;
stroke-width:5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="svg1" version="1.1" width="210" height="210" viewBox="0 0 210 210" border="1">

 <circle fill="none" stroke="#746500" stroke-width="3" cx="105" cy="105" r="100"/>


  <path   id="star_out" d="m105 5 29.4 59.5 65.7 9.5-47.6 46.4 11.2 65.5L105 155 46.2 185.9 57.4 120.5 9.9 74.1 75.6 64.5Z" /> 
  <path  id="star_ind" stroke-dashoffset="265"  d="m 105,25 23.51141,47.63932 52.57311,7.639322 -38.04226,37.082038 8.98056,52.36068 L 105,145 57.977178,169.72136 66.957739,117.36068 28.915479,80.278638 81.48859,72.63932 Z" >
     <animate
       attributeName="stroke-dasharray"
       dur="8s"
       begin="0s"
       values="0 265 0 265; 0 0 531 0"
       fill="freeze" />
  </path>
 <text id="txt1" x="50%" y="50%" text-anchor="middle" dy="10" font-size="36" fill="#EDEDED">100%</text>

</svg>

Анимация лоадера-шестиугольника

var count = $(('#txt1'));
$({ Counter: 0 }).animate({ Counter: count.text() }, {
  duration: 8000,
  easing: 'linear',
  step: function () {
    count.text(Math.ceil(this.Counter)+ "%");
  }
});

body{
font-family: 'Open Sans', sans-serif;}
#hex_out {
fill:#4D4D4D;
stroke:none;
stroke-width:1;
}
#hex_ind {
fill:#4D4D4D;
stroke:#FFD500;
stroke-width:5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="svg1" version="1.1" width="210" height="210" viewBox="0 0 210 210">

 <circle fill="none" stroke="#746500" stroke-width="3" cx="105" cy="105" r="100"/>


  <path id="hex_out" d="m105 5 86.6 50 0 100L105 205 18.4 155l0-100zM105 20l73.6 42.5 0 85" />
  <path id="hex_ind" stroke-dashoffset="255" d="m105 20 73.6 42.5 0 85L105 190 31.4 147.5l0-85z" class="s0">
     <animate
       attributeName="stroke-dasharray"
       dur="8s"
       begin="0s"
       values="0 255 0 255; 0 0 510 0"
       fill="freeze" />
  </path>
 <text id="txt1" x="50%" y="50%" text-anchor="middle" dy="10" font-size="36" fill="#EDEDED">100%</text>

</svg>

Анимация многолучевой звезды

var count = $(('#txt1'));
$({ Counter: 0 }).animate({ Counter: count.text() }, {
  duration: 10000,
  easing: 'linear',
  step: function () {
    count.text(Math.ceil(this.Counter)+ "%");
  }
});

body{
font-family: 'Open Sans', sans-serif;}
#manyAngle_out {
fill:#4D4D4D;
stroke:none;
stroke-width:1;
}
#manyAngle_ind {
fill:#4D4D4D;
stroke:#FFD500;
stroke-width:3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="svg1" version="1.1" width="210" height="210" viewBox="0 0 210 210">

 <circle fill="none" stroke="#746500" stroke-width="3" cx="105" cy="105" r="100"/>


  <path id="manyAngle_out" d="M105 10 117.3 59.1 152.5 22.7 138.6 71.4 187.3 57.5 150.9 92.7 200 105 150.9 117.3 187.3 152.5 138.6 138.6 152.5 187.3 117.3 150.9 105 200 92.7 150.9 57.5 187.3 71.4 138.6 22.7 152.5 59.1 117.3 10 105 59.1 92.7 22.7 57.5 71.4 71.4 57.5 22.7 92.7 59.1Z" />
  <path id="manyAngle_ind" stroke-dashoffset="448" d="M105 35 114.1 71.2 140 44.4 129.7 80.3 165.6 70 138.8 95.9 175 105 138.8 114.1 165.6 140 129.7 129.7 140 165.6 114.1 138.8 105 175 95.9 138.8 70 165.6 80.3 129.7 44.4 140 71.2 114.1 35 105 71.2 95.9 44.4 70 80.3 80.3 70 44.4 95.9 71.2Z" >
     <animate
       attributeName="stroke-dasharray"
       dur="10s"
       begin="0s"
       values="0 448 0 448; 0 0 896 0"
       fill="freeze" />
  </path>
 <text id="txt1" x="50%" y="50%" text-anchor="middle" dy="10" font-size="24" fill="#EDEDED">100%</text>

</svg>

Саша с каких пор ты плагинами пользуешься ? — Резидент Казахстана, Jan 14 '20 at 12:06
@MaximLensky когда на pure svg даже теоретически не сделать — Alexandr_TT, Jan 14 '20 at 12:56
@Stranger in the Q Привет! Не хочешь дать свой вариант ответа? Люди и я бы с интересом посмотрели на твой вариант JS/ — Alexandr_TT, Jan 14 '20 at 17:54
@Stranger in the Обращаюсь ещё раз, вдруг сообщение пропустил :) Очень интересно лично мне увидеть твоё решение, поучиться у мастера JS, без всяких подвохов, Уверен, не одному мне это будет интересно. Если нет желания или времени, что впрочем одно и тоже, я тебя понимаю вполне :) — Alexandr_TT, Jan 15 '20 at 07:09
@Alexandr_TT @ дойдет только если оповещаемый уже писал в коммментах, либо автор вопроса или ответа — Stranger in the Q, Jan 15 '20 at 15:00
@StrangerintheQ да, уже сообразил Просто привык, что ты почти всегда рядом со мной, в одних топиках :))) — Alexandr_TT, Jan 15 '20 at 15:05
@Alexandr_TT я сильно загружен сейчас =) — Stranger in the Q, Jan 15 '20 at 15:06
@StrangerintheQ Это не горит, совсем не к спеху — Alexandr_TT, Jan 15 '20 at 15:07
@Alexandr_TT это я к тому что я не внимательно смотрю вопросы, иногда заглядываю — Stranger in the Q, Jan 15 '20 at 15:08

score 4 · Answer 2 · answered Jan 14 '20 at 09:29

body {
  font-family: 'Open Sans', sans-serif;
}
#hex_out {
  fill: #4D4D4D;
  stroke: gold;
  stroke-width: 6;
  stroke-dasharray: 0, 600;
}
#txt1 {
  fill: #EDEDED;
  font-size: 50px;
  text-anchor: middle;
}

<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="svg1" version="1.1" width="210" height="210" viewBox="0 0 210 210" border="1">
 <circle fill="none" stroke="#746500" stroke-width="3" cx="105" cy="105" r="100"/>
 <path id="hex_out" d="m105 5 86.6 50 0 100L105 205 18.4 155l0-100z"></path>
  <path id="hex_out" d="m105 5 86.6 50 0 100L105 205 18.4 155l0-100z" transform="scale(0.9) translate(12,12)" >
    <animate attributeName="stroke-dasharray"  dur="10s" begin="0s" values="0, 600; 600, 0" fill="freeze" />
   </path>
   <text id="txt1" x="50%" y="50%" dy="16">100%</text>
</svg>

Как реализовать лоадер сложной формы с выводом процентов загрузки

2 Answers2