Заполнение пользовательского SVG progress bar

163

11 ноября 2018, 02:40

В своей простейшей форме я хочу сделать страницу загрузки, такую как на этом сайте.

Я хочу использовать собственный логотип SVG (который я сделал в иллюстраторе) и горизонтально заполнять логотип при загрузке страницы.

Как progress bar клипирования маски SVG (или что-то похожее).

Answer 1

Самый простой способ сделать это - заполнить лого с помощью градиента.

<linearGradient id="progress"> <stop id="stop1" offset="0" stop-color="black"/> <stop id="stop2" offset="0" stop-color="grey"/> </linearGradient>

Вам просто нужно изменить значение offset на обоих элементах <stop> на процент, который вы хотите - либо 0-> 1, либо 0% -> 100%. Например:

Функция может быть примерно такой:

function setProgress(amt) { amt = (amt < 0) ? 0 : (amt > 1) ? 1 : amt; document.getElementById("stop1").setAttribute("offset", amt); document.getElementById("stop2").setAttribute("offset", amt); }

Этот подход работает для любого элемента SVG, будь то текст, как в приведенной ниже демонстрационной версии, или сложный логотип из путей.

function setProgress(amt) 
{ 
  amt = (amt < 0) ? 0 : (amt > 1) ? 1 : amt; 
  document.getElementById("stop1").setAttribute("offset", amt); 
  document.getElementById("stop2").setAttribute("offset", amt); 
} 
 
   
// Simple test of setProgress(). 
// We step up from 0 to 1 using timeouts 
val = 0; 
doTimeout(); 
 
function doTimeout() { 
  setProgress(val); 
  val += 0.01; 
  if (val <= 1) { 
    setTimeout(doTimeout, 30); 
  } 
}

text { 
  font: 'Times Roman', serif; 
  font-size: 125px; 
  fill: url(#progress); 
}

<svg width="650" height="150"> 
  <defs> 
    <linearGradient id="progress"> 
      <stop id="stop1" offset="0" stop-color="black"/> 
      <stop id="stop2" offset="0" stop-color="grey"/> 
    </linearGradient> 
  </defs> 
 
  <text x="20" y="120">TILL JANZ</text> 
</svg>

Ещё пример - сезонная смена цвета деревьев

function setProgress(amt) 
{ 
  amt = (amt < 0) ? 0 : (amt > 1) ? 1 : amt; 
  document.getElementById("stop1").setAttribute("offset", amt); 
  document.getElementById("stop2").setAttribute("offset", amt); 
} 
 
   
// Simple test of setProgress(). 
// We step up from 0 to 1 using timeouts 
val = 0; 
doTimeout(); 
 
function doTimeout() { 
  setProgress(val); 
  val += 0.01; 
  if (val <= 1) { 
    setTimeout(doTimeout, 30); 
  } 
}

#tree1 { 
  fill: url(#progress); 
}

<svg width="267" height="347" viewBox="0 0 267 347"> 
  <defs> 
    <linearGradient id="progress"> 
      <stop id="stop1" offset="0" stop-color="#D3B300"/> 
      <stop id="stop2" offset="0" stop-color="green"/> 
    </linearGradient> 
  </defs> 
 
  <g id="tree1"> 
  <path id="Trunk" d="m119 262 28 0 0 86-28-2z"  style="fill:#502d16;stroke:#000"/> 
  <path id="Leaves" d="M261 327 169 244c16 9 103 34 76 15-25-18-81-74-81-74 8 5 94 45 71 27-24-19-78-88-78-88 7 5 42 11 42 11-24-13-47-73-47-73 11 8 21 7 21 7C149 51 133 0 133 0c0 0-15 51-39 69 0 0 9 1 21-7 0 0-23 60-47 73 0 0 35-7 42-12 0 0-38 58-78 89-20 15 61-23 69-28 0 0-25 38-75 85-14 14 63-13 72-25 0 0-70 64-88 86-6 7 123-56 123-56 0 0 133 70 129 52z"  />  
  </g> 
</svg>

Создание интернет-магазина игрушек в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Верстка текста в треугольнике

Подскажите как сверстать вот такой треугольник (смотрите на фото), что-бы в нем был текст и что-бы все заголовки были выровнены правильноПыталась...

178

HTML

Работа с объектом, сохраненным в сессии, на странице jsp

В session хранится List<Task>Я хочу выводить объект task, после чего проверять значение некого атрибута, и если оно равно заданному значению, то добавлять...

163

HTML

JSTL Статический код в jsp

Здравствуйте есть коды в jsp который позволяет добавить ответ на вопросу и увидеть все ответыВ БД ответ хранит id вопроса

171

HTML

Кэширование сайта отключить

Всем приветЕсть сайт на codeighniher, прикол в следующем

202