您可以将各种动画应用到网页中。 文本 , 模态框 , 过渡和进度指示器的 动画 。 对于进度指示器,通常以条形形式显示,您在条形上看到的进度指示已完成(或加载)了多少进度。 但是,如果您对按钮内的进度感兴趣 ,请尝试使用Ladda 。
Ladda是Hakim El Hattab制作的jQuery插件,可为您提供按钮内的加载效果 。 这是一个UI概念 ,可以有效地分隔行动与反馈之间的鸿沟。 将以加载指示器的形式向用户提供反馈,而不必离开页面。 还有适用于WordPress的Ladda版本。
基本用法
Ladda可以用作不需要任何其他依赖项的独立插件。 首先,您必须同时包括从项目中的GitHub页面获取的ladda.min.js和spin.min.js文件。
<script src="js/spin.min.js"></script>
<script src="js/ladda.min.js"></script>
要使按钮应用默认的Ladda主题,请加载ladda.min.cssCSS文件。 如果只需要功能按钮而不使用主题,请加载ladda-themeless.min.css文件。
<link rel="stylesheet" href="dist/ladda.min.css">
HTML标记
为了使Ladda正常工作,您必须在ladda-button
包含ladda-button
类。 这是一个例子:
<button class="ladda-button" data-color="mint" data-style="expand-right" data-size="xl">Submit</button>
Ladda还使用按钮样式的数据属性在HTML中为您提供了选项。 如上所示,该按钮将data-style
用作动画样式。 要应用其他样式,您可以在演示页面中查看完整列表。
要更改颜色,可以使用data-color
。 对于按钮大小,请在按钮中包含data-size
。
![](https://i-blog.csdnimg.cn/blog_migrate/d527ff1a346a428e763a90db82e43a86.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d527ff1a346a428e763a90db82e43a86.png)
与服务器合并
现在,要使加载的动画提交到服务器(动画之后将重新加载页面),我们将需要bind()
方法。 这将绑定进度按钮并模拟加载进度:
<script>
Ladda.bind( 'button', {
callback: function( instance ) {
var progress = 0;
var interval = setInterval( function() {
progress = Math.min( progress + Math.random() * 0.1, 1 );
instance.setProgress( progress );
if( progress === 1 ) {
instance.stop();
clearInterval( interval );
}
}, 200 );
}
});
</script>
您还可以使用Javascript API通过以下方法来控制按钮:
<script>
var l = Ladda.create( document.querySelector( 'button' ) );
l.start();
l.stop();
l.toggle();
l.isLoading();
l.setProgress( 0-1 );
</script>
结论
在Bootstrap的支持和响应能力的帮助下,Ladda在您的项目中值得一试。 此外,它已经过测试,并且可以在最新版本的Chrome,Firefox,Safari和IE9及更高版本中正常运行。 请随时在下面的评论框中告诉我们您的想法 。
翻译自: https://www.hongkiat.com/blog/loading-effect-in-buttons-ladda/