Bootstrap的Refresh Icon也spin起來(lái)
更新時(shí)間：2016年07月13日 10:52:20 投稿：mrr
本文通過(guò)實(shí)例給大家介紹Bootstrap的Refresh Icon相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
bootstrap下面有個(gè)glyphicon-refresh，但是不會(huì)自定動(dòng)態(tài)spin[旋轉(zhuǎn)]，下面提供下我的實(shí)例
.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);
}
}
調(diào)用方式如下
<span class="glyphicon glyphicon-refresh loading spin"> </span>
以上所述是小編給大家介紹的Bootstrap的Refresh Icon也spin起來(lái)，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- BootstrapTable refresh 方法使用實(shí)例簡(jiǎn)單介紹
- Bootstrap table中toolbar新增條件查詢及refresh參數(shù)使用方法
- BootStrap Table后臺(tái)分頁(yè)時(shí)前臺(tái)刪除最后一頁(yè)所有數(shù)據(jù)refresh刷新后無(wú)數(shù)據(jù)問(wèn)題
- bootstrap select2插件用ajax來(lái)獲取和顯示數(shù)據(jù)的實(shí)例
- 使用vue框架 Ajax獲取數(shù)據(jù)列表并用BootStrap顯示出來(lái)
- Bootstrap進(jìn)度條與AJAX后端數(shù)據(jù)傳遞結(jié)合使用實(shí)例詳解
- bootstrap jquery dataTable 異步ajax刷新表格數(shù)據(jù)的實(shí)現(xiàn)方法
- 使用Bootstrap Tabs選項(xiàng)卡Ajax加載數(shù)據(jù)實(shí)現(xiàn)
- DataTables+BootStrap組合使用Ajax來(lái)獲取數(shù)據(jù)并且動(dòng)態(tài)加載dom的方法（排序，過(guò)濾，分頁(yè)等）
- bootstrapTable+ajax加載數(shù)據(jù) refresh更新數(shù)據(jù)
相關(guān)文章
這篇文章主要介紹了webpack 模塊熱替換原理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
javascript權(quán)威指南 學(xué)習(xí)筆記之javascript數(shù)據(jù)類型
JavaScript中允許使用三種基本數(shù)據(jù)類型 數(shù)字，文本字符和布爾值。其中數(shù)字包括符點(diǎn)數(shù).此外，它還支持兩種小數(shù)據(jù)類型 －null(空)和undefined(未定義)，該兩種小數(shù)據(jù)類型，它們各自只定義了一個(gè)值 。2011-09-09
本篇文章主要介紹了微信端開發(fā)--登錄小程序步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
javascript Onunload與Onbeforeunload使用小結(jié)
Onunload，onbeforeunload都是在刷新或關(guān)閉時(shí)調(diào)用，可以在<script>腳本中通過(guò)window.onunload來(lái)指定或者在<body>里指定。區(qū)別在于onbeforeunload在onunload之前執(zhí)行，它還可以阻止onunload的執(zhí)行。2009-12-12
利用js給datalist或select動(dòng)態(tài)添加option選項(xiàng)的方法
下面小編就為大家分享一篇利用js給datalist或select動(dòng)態(tài)添加option選項(xiàng)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
起點(diǎn)頁(yè)面?zhèn)髦礿s,有空研究學(xué)習(xí)下
起點(diǎn)上的頁(yè)面?zhèn)髦礿s,有空研究下2010-01-01
JavaScript?數(shù)據(jù)結(jié)構(gòu)之集合創(chuàng)建(2)
這篇文章主要介紹了JavaScript?數(shù)據(jù)結(jié)構(gòu)之集合創(chuàng)建,上一篇我們介紹了什么是集合，并且手動(dòng)實(shí)現(xiàn)了一個(gè)集合的類,本篇基于上篇內(nèi)容繼續(xù)深入介紹需要的小伙伴可以參考一下2022-04-04
在vs2010中調(diào)試javascript代碼方法
只在IE瀏覽器中測(cè)試成功了，在谷歌瀏覽中沒(méi)有測(cè)試成功，其他瀏覽器沒(méi)有測(cè)試。2011-02-02
Bootstrap modal 多彈窗之疊加關(guān)閉陰影遮罩問(wèn)題的解決方法
這里也會(huì)遇到一次性關(guān)閉所有modal引起陰影遮罩的問(wèn)題，也就是所有modal都關(guān)閉了，但是主頁(yè)面仍然被陰影遮罩。下面通過(guò)本文給大家分享解決方案，需要的朋友參考下吧2017-02-02
這篇文章主要介紹了JS iFrame加載慢的解決方法，非常實(shí)用，感興趣的朋友一起學(xué)習(xí)吧2016-05-05