Как я могу активировать индикатор выполнения, используя кнопку в JavaScript? - PullRequest
Новая
       16

Как я могу активировать индикатор выполнения, используя кнопку в JavaScript?

0 голосов
/ 27 ноября 2018

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

<div class="preloader-wrapper big active">
    <div class="spinner-layer spinner-blue-only">
        <div class="circle-clipper left">
            <div class="circle"></div>
        </div><div class="gap-patch">
        <div class="circle"></div>
    </div><div class="circle-clipper right">
        <div class="circle"></div>
    </div>
    </div>
</div>

Как я могу деактивировать его и повторно активировать, например, после нажатия кнопки?

Ответы [ 3 ]

0 голосов
/ 27 ноября 2018

An id для вашего индикатора выполнения (скажем, id="loader"), поэтому ваш код будет выглядеть следующим образом: 

<div id="loader" class="preloader-wrapper big active">
   [...]

И переключите его атрибут display с помощью этого сценария: 

function toggleLoader() {
    var x = document.getElementById("loader");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

Свяжите этот скрипт с кнопкой для его запуска с помощью: 

<button onclick="toggleLoader()">Click Me</button>

Рабочий пример: 

function toggleLoader() {
    var x = document.getElementById("loader");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
<button onclick="toggleLoader()">Click Me</button>


<svg id="loader" width="64px" height="64px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling" style="display:none;"><circle cx="50" cy="50" fill="none" ng-attr-stroke="{{config.color}}" ng-attr-stroke-width="{{config.width}}" ng-attr-r="{{config.radius}}" ng-attr-stroke-dasharray="{{config.dasharray}}" stroke="#3be8b0" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138" transform="rotate(149.836 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>
0 голосов
/ 27 ноября 2018

Присвойте идентификатор тегу анимации в элементе <svg> <circle>, затем просто деактивируйте его, как если бы вы использовали любой другой элемент HTML 

<animateTransform id="progressBarAnimation" attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>

, затем выполните 

document.getElementById("progressBarAnimation").type = "none";
0 голосов
/ 27 ноября 2018

Вы пробовали 

<button onclick="myFunction()">Click me</button>

Согласно https://www.w3schools.com/jsref/event_onclick.asp

...