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 相关文章推荐
文本加密解密
Jun 23 Javascript
用JavaScript脚本实现Web页面信息交互
Dec 21 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
Oct 24 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
JavaScript阻止回车提交表单的方法
Dec 30 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
详解vue axios用post提交的数据格式
Aug 07 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
layui表格内容溢出的解决方法
Sep 06 Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 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
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
react 应用多入口配置及实践总结
2018/10/17 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
Python类的基础入门知识
2008/11/24 Python
python解析json实例方法
2013/11/19 Python
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
python操作链表的示例代码
2020/09/27 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
秘书岗位职责
2013/11/18 职场文书
同事打架检讨书
2014/02/04 职场文书
公益广告宣传方案
2014/02/28 职场文书
高三家长寄语
2014/04/03 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB