Как использовать счетчик, предоставленный в облегченном дизайне материалов?

Я хочу, чтобы счетчик появлялся при загрузке страницы, а затем медленно исчезал после загрузки страницы. Как реализовать эту функциональность с помощью облегченного дизайна материалов?

material-design-lite

an0nh4x0r 26.12.2015 источник

comment

Можете ли вы поделиться тем, что вы уже пробовали и где вы застряли? - SaeX 26.12.2015

comment

smallenvelop.com/display-loading-icon-page-loads-completely/ ..... Я использую метод, описанный в этом посте. Но они использовали файл gif, и все, что я пытаюсь сделать, это использовать встроенный класс mdl-spinner, предоставленный в material-design-lite. - an0nh4x0r 27.12.2015

Ответы (2)

arrow_upward
3
arrow_downward

HTML для счетчика таков:

<div class="mdl-spinner mdl-js-spinner is-active"></div>

Файлы CSS и javascript для облегченного дизайна материалов будут анализировать документ и обновлять его до счетчика при загрузке страницы. Если вы хотите добавить это на страницу после загрузки страницы, вам также нужно будет вызвать

componentHandler.upgradeDom();

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

Matthew 14.01.2016

arrow_upward
1
arrow_downward

Спиннер MDL при загрузке страницы

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

Размещение спиннера

Чтобы создать счетчик загрузки, вам сначала нужно разместить <div class="mdl-spinner mdl-js-spinner is-active"> в верхней части документа. Я предлагаю прямо над закрывающим тегом </head>.

Центрирование спиннера.

Чтобы центрировать счетчик, вы можете сделать это с помощью flex box вот так. Поместите спиннер в контейнер над закрывающимся </head>

HTML

<div class="spinner">
  <div class="mdl-spinner mdl-js-spinner is-active"></div>
</div>

CSS

Центрирование счетчика с помощью flexbox. spinner устанавливается на display:none, чтобы скрыть его от просмотра банкомата. Добавляем класс spinner-on и присваиваем ему свойство display flex, которое мы запускаем с помощью jQuery, когда хотим его показать.

$spinner-size:100px;
html, body, .spinner{
  height:100%;
  overflow: hidden;
}

.mdl-spinner{
  height:$spinner-size;
  width:$spinner-size;
}

.spinner{
  position:relative;
  //top:100px;
  display: none;
  align-items: center;
  justify-content: center;
}

.spinner-on {
 display: flex;
}

Триггер с jQuery

С помощью jQuery мы запускаем наш класс spinner-on, который отображает счетчик. Затем мы используем функции затухания для постепенного появления счетчика и его исчезновения через заданное время. Переполнение также установлено, поэтому теперь мы можем прокручивать страницу.

$(function() {
    var overflow = $('body,html, .spinner');
    $(".spinner").addClass('spinner-on');
    $(".spinner").fadeOut(2000, function() {
        $("body").fadeIn(2000);
        overflow.css('overflow','visible');
    });
});

ДЕМО

brent_white 19.03.2018