Содержание
Чтобы привлечь больше клиентов, чтобы выглядеть больше, чтобы быть запоминающимся, нарциссизм, эгоизм, называйте это как хотите. Для владельцев малого или крупного бизнеса очень важно «пометить» свой бизнес логотипом, поскольку он представляет их бизнес. При использовании веб-приложения вы будете рано или поздно ждать завершения инструкции и увидите индикатор выполнения (надеюсь), чтобы узнать, как выполняется задача в фоновом режиме, что может быть лучше для вашего приложения, чем использование пользовательский индикатор с вашим логотипом? Может быть, деньги, однако мы говорим о прогресс-баре в вашем приложении, не меняйте тему. Это можно использовать либо в качестве заставки при загрузке приложения, либо для отображения хода выполнения асинхронной задачи в пользовательском интерфейсе.
В этой статье вы узнаете, как создать свой собственный индикатор выполнения с вашим собственным логотипом, используя LoadGo.
Требования
Для достижения нашей цели мы будем использовать LoadGo плагин. LoadGo — это плагин Javascript, который позволяет вам легко создавать индикатор выполнения, используя ваши собственные изображения, используя несколько строк кода. Этот плагин идеально подходит для создания пользовательского индикатора выполнения для анимации изображения логотипа, когда пользователь ожидает загрузки чего-либо (веб-сайт, получение информации, обновление статуса и т. Д.)
- Он создает наложение над DOM-элементом по вашему желанию и имитирует процесс загрузки с использованием вычислений ширины.
- LoadGo была протестирована в IE 9, IE 10, IE Edge, Google Chrome и Mozilla Firefox.
Отказ от ответственности: LoadGo не добавляет никакого слушателя загрузки для прогресса загрузки вашего документа или любых других ресурсов. Информация о прогрессе должна быть предоставлена вами.
Чтобы начать работу с LoadGo, загрузите .zip освоите здесь или клонируйте проект из GitHub. У LoadGo есть 2 версии: одна использует jQuery, а другая простая vanillaJS, независимо от версии, которую вы хотите использовать, добавьте скрипт в ваш документ с помощью тега script:
И тогда LoadGo будет загружен в ваш документ. Если вы используете JQuery, вы можете использовать его с $("element").loadgo() или если вы используете простой Javascript, то LoadGo Объект будет доступен глобально в окне.
LoadGo находится под лицензией MIT. Не стесняйтесь загружать, изменять и адаптировать его к вашим собственным целям. Если вы обнаружите какую-либо ошибку, отправьте запрос на удаление или напишите проблему в официальном репозитории Github.
Основное использование
Как упоминалось ранее LoadGo это плагин, который предоставляет вам лучший способ держать ваших пользователей в курсе процесса загрузки, который занимает некоторое время, чтобы быть завершенным. Например:
- Пользователи загружают файл на ваш сервер.
- Система конвертирует файл в PDF или что-то еще.
- Текущая страница загружается.
Возможности безграничны, теперь вам нужно всего лишь изучить основы этого плагина. Первое, что вам нужно знать, это то, что нам нужен существующий элемент DOM, этот элемент DOM должен быть img элемент должен загрузить собственный логотип, однако этот логотип не нуждается в каких-либо изменениях, логотип может быть оригинальным логотипом вашей организации, LoadGo добавит прозрачный оверлей, который добавит эффект загрузки. Это наложение устанавливается с помощью position: absolute Свойство CSS, поэтому ваш элемент DOM должен находиться внутри DIV элемент или вещи не будут выглядеть хорошо:
Наш элемент в этом случае имеет logo-loader Я бы. Теперь, чтобы инициализировать с помощью Javascript, выполните $("element").loadgo метод, если вы используете JQuery или Loadgo.init с простым JavaScript.
// If you're using jQuery
$('#logo-loader').loadgo();
// If you're using plain JS
var imgLogoElement = document.getElementById("logo-loader");
Loadgo.init(imgLogoElement);Это должно создать прозрачный оверлей, который прояснит ваш логотип, однако он не будет показывать только прогресс! Поэтому нам нужно изменить прогресс бара, используя либо Loadgo.setprogress используя vanillaJS или $(element).loadgo('setprogress', value), Как изменить значение индикатора выполнения зависит от вас, мы показываем пример, используя setInterval и изменение значения индикатора выполнения с помощью Javascript.
Для этого у вас есть 2 варианта:
Используйте метод встроенного цикла
Чтобы проверить, все ли правильно реализовано, вы можете выполнить метод цикла, чтобы создать неопределенный цикл, который будет анимировать индикатор выполнения:
// jQuery
$('#logo-loader').loadgo('loop', 10);
// Javascript
Loadgo.loop(document.getElementById('logo-loader'), 10);и остановите это используя:
// jQuery
$('#logo-loader').loadgo('stop');
// Javascript
Loadgo.stop(document.getElementById('logo-loader'));Это должно привести к следующему результату:
Сложитесь с JS
Вы можете реализовать собственное изменение прогресса, используя метод setInterval:
var progress = 0;
// Every half second add 10 to the progress of the bar
var myInterval = setInterval(function(){
// Stop progress
if(progress == 100){
return stopInterval();
}
// Update progress
progress += 10;
// Change progress of the bar with JAVASCRIPT
Loadgo.setprogress(document.getElementById("logo-loader"), progress);
}, 500);
function stopInterval(){
clearInterval(myInterval);
console.log("The progress bar has a value of 100 %");
}И с помощью jQuery:
var progress = 0;
// Every half second add 10 to the progress of the bar
var myInterval = setInterval(function(){
// Stop progress
if(progress == 100){
return stopInterval();
}
// Update progress
progress += 10;
// Change progress of the bar with JQUERY
$('#logo-loader').loadgo('setprogress',progress);
}, 500);
function stopInterval(){
clearInterval(myInterval);
console.log("The progress bar has a value of 100 %");
}И это все, самая простая реализация LoadGo с вашим собственным логотипом. В следующем примере показано, как Loadgo работает с логотипом Our Code World:
Код, использованный для предыдущего примера:
var image = document.getElementById("logo-loader");
// When the image loads, create the progress
image.onload = function(){
// Init the loader
Loadgo.init(image);
// Load effect
triggerLoadEffect();
};
function triggerLoadEffect(){
var progress = 0;
// Every half second add 10 to the progress of the bar
var myInterval = setInterval(function(){
// Stop progress
if(progress == 100){
return stopInterval();
}
// Update progress
progress += 10;
// Change progress of the bar
Loadgo.setprogress(image, progress);
}, 500);
function stopInterval(){
clearInterval(myInterval);
console.log("The progress bar has a value of 100 %");
}
}
Помимо метода setprogress, loop и stop, LoadGo предлагает еще 2 метода.
Методы и варианты
Вы можете установить некоторые параметры при инициализации плагина:
// Custom options with jQuery
$('#my-image').loadgo({
filter: 'blur',
direction: 'bt',
opacity: 1,
image: 'custom-overlay.png',
bgcolor: '#01AEF0'
});
// Custom options with Javascript
var element = document.getElementById("my-image");
Loadgo.init(element, {
filter: 'blur',
direction: 'bt',
opacity: 1,
image: 'custom-overlay.png',
bgcolor: '#01AEF0'
});Варианты поддержки API:
- BGCOLOR: цвет фона наложения в шестнадцатеричном или RGB. По умолчанию #FFFFFF.
- помутнение: оверлейная прозрачность. По умолчанию 0,5
- мультипликационный: true если
setprogressCSS-переходы разрешены, в противном случае — false. По умолчанию правда (ПРИМЕЧАНИЕ. Internet Explorer не поддерживает переходы CSS). - образ: URL-адрес для ставок, если хотите использовать фоновое изображение вместо простого цвета. Эта опция отключает BGCOLOR вариант.
- учебный класс: CSS класс, который будет применен к оверлею. Используя эту опцию, вы должны убедиться, что все выглядит хорошо, потому что некоторые опции CSS для класса могут сделать недействительными другие LoadGo Варианты CSS плагина. По умолчанию никто.
- изменить размер: изменить размер функции. LoadGo предоставляет функцию, которая автоматически изменяет размеры LoadGo оверлей по умолчанию, но вы можете использовать свой собственный.
- направление: направление анимации. Возможные значения: «Л.Р.» (слева направо), «Ге» (справа налево), «Ы» (снизу вверх), «ТБ» (сверху вниз). По умолчанию «Л.Р.».
- фильтр: CSS фильтр изображений в соответствии с Свойство CSS-фильтра. Возможные значения: «Размытость», «Оттенки серого», ‘сепия’, «Оттенок-поворот», «Инверсия», «Непрозрачность».
LoadGo API предоставляет в общей сложности 5 методов:
Установить прогресс
Метод set progress ожидает, что число задает ход выполнения оверлея загрузки, это число должно быть в диапазоне от 0 до 100 (в процентах):
// jQuery
$('#logo').loadgo('setprogress', 50);
// Javascript
Loadgo.setprogress(document.getElementById('logo'), 50);Сбросить прогресс
Этот метод устанавливает прогресс на ноль автоматически. Это действительно полезно, когда вы используете один и тот же элемент для нескольких загрузок, и вам нужно сбросить все перед началом нового.
// jQuery
$('#logo').loadgo('resetprogress');
// Javascript
Loadgo.resetprogress(document.getElementById('logo'));Получить прогресс
Этот метод возвращает текущий прогресс. Это число будет между 0 и 100 (в процентах).
// jQuery
$('#logo').loadgo('getprogress');
// Javascript
Loadgo.getprogress(document.getElementById('logo'));петля
Метод set overlay создает бесконечный цикл. Это полезно в ситуациях, когда у вас нет возможности измерить прогресс. Этот метод принимает параметр длительности (мс) для настройки скорости анимации. Вы можете остановить это, используя метод остановки.
// jQuery
$('#logo').loadgo('loop', 10);
// Javascript
Loadgo.loop(document.getElementById('logo'), 10);Стоп
Метод stop останавливает цикл и показывает полное изображение.
// jQuery
$('#logo').loadgo('stop');
// Javascript
Loadgo.stop(document.getElementById('logo'));Дополнительные примеры и возможности этой библиотеки см. В разделе примеров в официальный сайт здесь. Удачного кодирования!
