如何使用自己的logo创建自定义加载栏 _加载栏

本文概述

要求
基本用法
方法和选项

为了吸引更多的客户, 看起来更大, 更令人难忘, 纳粹主义, 自我主义将其命名为你想要的。对于小型或大型企业所有者而言, 以徽标” 品牌化” 他们的企业非常重要, 因为它代表了他们的企业。使用Web应用程序时, 你迟早会等待一条指令完成, 并且你会看到一个进度条(希望如此), 以了解任务在后台进行的情况, 这对你的应用程序来说比使用更好一个带有你自己徽标的自定义进度栏？也许有钱, 但是我们正在谈论你的应用程序中的进度条, 请不要更改主题。可以在应用加载时用作启动屏幕, 也可以在UI中显示异步任务的进度。
在本文中, 你将学习如何使用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标签将脚本添加到文档中：

< !-- If you use jQuery --> < script type="text/javascript" src="http://www.srcmini.com/path-to/loadgo.min.js"> < /script> < !-- If you don't use jQuery --> < script type="text/javascript" src="http://www.srcmini.com/path-to/loadgo-nojquery.min.js"> < /script>

然后LoadGo将被加载到你的文档中。如果使用的是jQuery, 则可以将其与$(” element” )。loadgo()一起使用, 或者使用的是纯Javascript, 则LoadGo对象将在窗口中全局可用。
LoadGo受MIT许可。随意下载, 修改和适应你自己的目的。如果发现任何错误, 请发送拉取请求或在官方Github存储库中写问题。
基本用法如前所述, LoadGo是一个插件, 它为你提供了一种更好的方式来使你的用户随时了解加载过程的最新信息。例如：

用户将文件上传到你的服务器。
系统正在将文件转换为PDF或其他内容。
当前页面正在加载。

可能性无穷无尽, 现在你只需要学习该插件的基础知识即可。你首先需要知道的是, 我们需要一个现有的DOM元素, 该DOM元素需要是一个< img> 节点。此外, 此img元素需要加载你自己的徽标, 但是此徽标不需要任何修改, 徽标可以是你组织的原始徽标, LoadGo将添加一个透明的覆盖层, 以增加加载效果。该叠加层是通过使用position：absolute CSS属性设置的, 因此你的DOM元素必须位于DIV元素内, 否则效果将不佳：

< div> < img id="logo-loader" src="http://www.srcmini.com/my-logo-file.png" alt="Loading my friend ..." /> < /div>

在这种情况下, 我们的元素具有徽标加载程序ID。现在使用Javascript进行初始化, 如果你使用的是带有纯javascript的jQuery或Loadgo.init, 则执行$(” element” )。loadgo方法。

// If you're using jQuery$('#logo-loader').loadgo(); // If you're using plain JSvar imgLogoElement = document.getElementById("logo-loader"); Loadgo.init(imgLogoElement);

那应该创建透明的覆盖层, 以使你的徽标清晰明了, 但是它不会单独显示进度！因此, 我们需要使用使用vanillaJS的Loadgo.setprogress或$(element).loadgo(‘ setprogress’ , value)来更改栏的进度。由于如何更改进度条的值取决于你, 我们将展示一个使用setInterval并使用Javascript更改进度条的值的示例。
为此, 你有2个选择：
使用内置循环方法
要测试你是否正确实现了所有功能, 可以执行loop方法创建一个不确定的循环, 该循环将使进度条具有动画效果：

// jQuery$('#logo-loader').loadgo('loop', 10); // JavascriptLoadgo.loop(document.getElementById('logo-loader'), 10);

并使用以下命令停止它：

// jQuery$('#logo-loader').loadgo('stop'); // JavascriptLoadgo.stop(document.getElementById('logo-loader'));

那应该产生以下结果：

文章图片
使用JS使自己复杂化
你可以使用setInterval方法实现自己的进度更改：

var progress = 0; // Every half second add 10 to the progress of the barvar myInterval = setInterval(function(){ // Stop progressif(progress == 100){return stopInterval(); }// Update progressprogress += 10; // Change progress of the bar with JAVASCRIPTLoadgo.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 barvar myInterval = setInterval(function(){ // Stop progressif(progress == 100){return stopInterval(); }// Update progressprogress += 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 %"); }

【如何使用自己的logo创建自定义加载栏】就是这样, 带有你自己的徽标的LoadGo的最基本实现。以下示例说明了Loadgo如何与Our Code World徽标一起使用：

文章图片
对于前面的示例, 使用的代码是：

< div> < img id="logo-loader" src="http://ourcodeworld.com/resources/img/ocw-logo-main.png" /> < /div> < !-- Load Loadgo --> < script type="text/javascript" src="http://img.readke.com/220523/0230001512-6.jpg"> < /script> < script> var image = document.getElementById("logo-loader"); // When the image loads, create the progressimage.onload = function(){// Init the loaderLoadgo.init(image); // Load effecttriggerLoadEffect(); }; function triggerLoadEffect(){var progress = 0; // Every half second add 10 to the progress of the barvar myInterval = setInterval(function(){ // Stop progressif(progress == 100){return stopInterval(); }// Update progressprogress += 10; // Change progress of the barLoadgo.setprogress(image, progress); }, 500); function stopInterval(){clearInterval(myInterval); console.log("The progress bar has a value of 100 %"); }}< /script>

除了setprogress方法, 循环和停止之外, LoadGo还提供了其他两种方法。
方法和选项你可以在插件初始化时设置一些选项：

// Custom options with jQuery$('#my-image').loadgo({filter:'blur', direction:'bt', opacity:1, image:'custom-overlay.png', bgcolor:'#01AEF0'}); // Custom options with Javascriptvar element = document.getElementById("my-image"); Loadgo.init(element, {filter:'blur', direction:'bt', opacity:1, image:'custom-overlay.png', bgcolor:'#01AEF0'});

API的supportes选项包括：

bgcolor：背景叠加颜色(十六进制或RGB)。默认值为#FFFFFF。
不透明度：覆盖透明度。默认值为0.5
动画：如果启用了setprogress CSS宽度过渡, 则为true, 否则为false。默认值为true(注意：Internet Explorer不支持CSS过渡)。
image：如果想要背景图片而不是简单的颜色, 则可以使用图片网址。此选项禁用bgcolor选项。
class：将应用于叠加层的CSS类。通过使用此选项, 你应该确保所有内容看起来都不错, 因为类的某些CSS选项可能会使其他LoadGo插件CSS选项无效。默认为无。
调整大小：调整大小功能。 LoadGo提供了一个功能, 默认情况下会自动调整LoadGo叠加层的大小, 但是你可以使用自己的功能。
方向：动画方向。可能的值：” lr” (从左到右), ” rl” (从右到左), ” bt” (从下到上), ” tb” (从上到下)。默认值为” lr” 。
filter：根据CSS过滤器属性的CSS图像过滤器。可能的值：” 模糊” , “ 灰度” , “ 棕褐色” , “ 色相旋转” , “ 反转” , “ 不透明” 。

LoadGo API总共提供5种方法：
设定进度
设置进度方法需要一个数字来设置加载叠加层的进度, 该数字必须介于0到100(百分比)之间：