Loading动画以及消息提示框的JavaScript小插件
OUDUIDUI

最近工作上做了几个H5活动页,比较简单的商品展示和领券动作,所以就使用原生js进行实现。然后实现过程中,发现需要到显示加载动画以及消息提示框,所以就去找了现有插件,但没找到特别满意的,最后就打算自己造个轮子,顺便练练手。

Demo:https://ouduidui.cn/notice-kit/

Github:https://github.com/OUDUIDUI/notice-kit

喜欢的朋友麻烦给个Star!!!

安装和引入

releases下载notice.min.cssnotice.min.js,放入你们的项目文件中,然后在html文件引入,并且实例化Notice

1
2
3
4
<link rel="stylesheet" href="./notice.min.css">

<script src="./notice.min.js"></script>
<script>const notice = new Notice();</script>

Loading - 加载动画

显示Loading

使用下列代码就可以显示loading动画了。

1
notice.showLoading();

showloading

当然,我们可以传入一个options对象去自定义loading动画,具体详见具体详见Github

其中我设置了6种加载动画,全部都是使用css动画实现。

1
2
3
4
5
6
7
notice.showLoading({
type: 'dots',
title: 'Loading',
color: '#333',
backgroundColor: 'rgba(255,255,255,.6)',
fontSize: 14
});

更多的加载动画可以在Demo中预览,喜欢的话麻烦在Github给个Star!!

关闭Loading

1
notice.hideLoading()

Toast - 消息弹窗

使用下列代码可以显示消息弹窗:

1
2
3
notice.showToast({
text: 'This is a message.'
});

showToast

弹窗的样式在PC端和移动端是不一样的:

showToast-mb

同样,我们可以通过调整options来设置消息弹窗的样式,具体详见具体详见Github

最后喜欢的朋友能够给个Star

Github:https://github.com/OUDUIDUI/notice-kit

 Comments