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 !!的作用
Dec 04 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
javascript中的数字与字符串相加实例分析
Aug 14 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
jQuery validate 验证radio实例
Mar 01 Javascript
JavaScript 常见的继承方式汇总
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的简易冒泡法代码分享
2012/08/28 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
广告显示判断
2006/08/31 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
如何将Pycharm中调整字体大小的方式设置为&quot;ctrl+鼠标滚轮上下滑&quot;
2020/11/17 Python
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
婚礼证婚人证婚词
2014/01/08 职场文书
打架检讨书100字
2014/01/08 职场文书
给同事的道歉信
2014/01/11 职场文书
学校远程教育工作总结
2015/08/11 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
六年级作文之自救
2019/12/19 职场文书
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis