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 树控件 比较好用
Jun 11 Javascript
javascript IFrame 强制刷新代码
Jul 23 Javascript
js中创建对象的几种方式示例介绍
Jan 26 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 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学习之数组的定义和填充
2011/04/17 PHP
PHP+ajax分页实例简析
2015/12/07 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
angular.bind使用心得
2015/10/26 Javascript
完善的jquery处理机制
2016/02/21 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
vue.js实例对象+组件树的详细介绍
2017/10/20 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
详解vue高级特性
2020/06/09 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
如何手工释放资源
2013/12/15 面试题
大学毕业生个人自荐信范文
2014/01/08 职场文书
广告设计应届生求职信
2014/03/01 职场文书
师恩难忘教学反思
2014/04/27 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
多媒体教室标语
2014/06/26 职场文书
八项规定整改方案
2014/10/01 职场文书
机关职员工作检讨书
2014/10/23 职场文书
毕业生党员个人总结
2015/02/14 职场文书
对学校的意见和建议
2015/06/04 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
校园开放日新闻稿
2015/07/17 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
校运会广播稿
2015/08/19 职场文书
入党心得体会
2019/06/20 职场文书
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis