Bootstrap的Refresh Icon也spin起来


Posted in Javascript onJuly 13, 2016

bootstrap下面有个glyphicon-refresh,但是不会自定动态spin[旋转],下面提供下我的实例

.spin{
-webkit-transform-origin: 50% 50%;
transform-origin:50% 50%;
-ms-transform-origin:50% 50%; /* IE 9 */
-webkit-animation: spin .8s infinite linear;
-moz-animation: spin .8s infinite linear;
-o-animation: spin .8s infinite linear;
animation: spin .8s infinite linear;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}

调用方式如下

<span class="glyphicon glyphicon-refresh loading spin"> </span>

以上所述是小编给大家介绍的Bootstrap的Refresh Icon也spin起来,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript使用activex控件的代码
Jan 27 Javascript
把jquery 的dialog和ztree结合实现步骤
Aug 02 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
JS实现鼠标框选效果完整实例
Jun 20 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
Sep 17 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 #Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 #Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 #Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 #Javascript
javascript类型系统——undefined和null全面了解
Jul 13 #Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 #Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 #Javascript
You might like
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
理解JavaScript原型链
2016/10/25 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
用python实现的线程池实例代码
2018/01/06 Python
python爬虫基本知识
2018/03/05 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
Python高斯消除矩阵
2019/01/02 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
python实现银行账户系统
2021/02/22 Python
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
马来西亚网上购物:Youbeli
2018/03/30 全球购物
送给程序员的20个Java集合面试问题
2014/08/06 面试题
学生喝酒检讨书500字
2014/11/02 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
通知的写法
2015/04/23 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书