当前位置： 正文

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

03-20 前端/HTML/CSS 640

本文概述

为了吸引更多的客户, 看起来更大, 更令人难忘, 纳粹主义, 自我主义将其命名为你想要的。对于小型或大型企业所有者而言, 以徽标”品牌化”他们的企业非常重要, 因为它代表了他们的企业。使用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="path-to/loadgo.min.js"></script>

<!-- If you don't use jQuery -->
<script type="text/javascript" src="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="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 JS
var 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);

// 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徽标一起使用：

我们的代码世界徽标

对于前面的示例, 使用的代码是：

<div>
    <img id="logo-loader" src="http://ourcodeworld.com/resources/img/ocw-logo-main.png" />
</div>

<!-- Load Loadgo -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/LoadGo/2.1/loadgo-nojquery.min.js"></script>
<script>
    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 %");
        }
    }
</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 Javascript
var 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(百分比)之间：

// 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'));

环

集覆盖方法会创建一个无限循环。对于无法测量进度的情况, 这很有用。此方法接受duration(ms)参数来自定义动画速度。你可以使用stop方法停止它。

// jQuery
$('#logo').loadgo('loop', 10);

// Javascript
Loadgo.loop(document.getElementById('logo'), 10);

停止

stop方法停止循环并显示完整图像。

// jQuery
$('#logo').loadgo('stop');

// Javascript
Loadgo.stop(document.getElementById('logo'));

有关此库的更多示例和可能性, 请访问此处的官方网站上的示例区域。编码愉快！

微信公众号
手机浏览(小程序)
0
分享到：

猜你喜欢

如何在Google AMP的amp-carousel中添加灯箱效果？
前端/HTML/CSS

03-21 749
从服务器响应(请求)返回HTML，好的还是不好的做法？
前端/HTML/CSS

03-20 686
如何使用wkhtmltopdf在PDF上添加新页面
前端/HTML/CSS

03-20 683
如何在Dompdf中将图像与表格单元格的底部对齐
前端/HTML/CSS

03-20 630
Init.js：关于为什么和如何使用全栈JavaScript的指南
前端/HTML/CSS

03-20 680
使用javascript html5在画布上绘制点(圆)
前端/HTML/CSS

03-20 680
没有账号？ 忘记密码？