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)文章
js調(diào)用后臺(tái)、后臺(tái)調(diào)用前臺(tái)等方法總結(jié)
這篇文章主要對(duì)js調(diào)用后臺(tái)，后臺(tái)調(diào)用前臺(tái)等方法做個(gè)總結(jié),需要的朋友可以參考下2014-04-04
JS遍歷JSON數(shù)組及獲取JSON數(shù)組長(zhǎng)度操作示例【測(cè)試可用】
這篇文章主要介紹了JS遍歷JSON數(shù)組及獲取JSON數(shù)組長(zhǎng)度操作,涉及javascript簡(jiǎn)單json數(shù)組遍歷與運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
基于JavaScript實(shí)現(xiàn)單選框下拉菜單添加文件效果
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)單選框下拉菜單添加文件效果的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
關(guān)于vite?+?ts?找不到模塊@/xxxx?或其相應(yīng)的類型聲明問(wèn)題
這篇文章主要介紹了vite?+?ts?找不到模塊@/xxxx?或其相應(yīng)的類型聲明,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
這篇文章主要介紹了前端路由&webpack基礎(chǔ)配置詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
js字符串轉(zhuǎn)json的三種簡(jiǎn)單方法舉例
在很多時(shí)候我們都需要將數(shù)據(jù)轉(zhuǎn)換為JSON的格式去進(jìn)行請(qǐng)求,下面這篇文章主要給大家介紹了關(guān)于js字符串轉(zhuǎn)json的三種簡(jiǎn)單方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
最近用到scrolloTop()想去獲取滾動(dòng)條距離頂部的距離，結(jié)果只有chrome下面可以正常的獲取scrollTop，ff和ie下這個(gè)值都等于0，使得許多效果比如屏幕滾動(dòng)等等均無(wú)法正常實(shí)現(xiàn)。究其原因是scrollTop()在各個(gè)瀏覽器中的兼容性問(wèn)題，今天我們就來(lái)詳細(xì)探討下。2015-04-04
前端本地文件獲取excel表格內(nèi)容并渲染在頁(yè)面的方法
這篇文章主要介紹了前端本地文件獲取excel表格內(nèi)容并渲染在頁(yè)面的方法,主要利用SheetJS插件用于處理Excel文件,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03
本文主要介紹了原生JS中Ajax的實(shí)現(xiàn)原理，XMLHttpRequest及promise的概念和流程。需要的朋友可以看下2016-12-12
JavaScript封裝Vue-Router實(shí)現(xiàn)流程詳解
這篇文章主要介紹了JavaScript封裝Vue-Router實(shí)現(xiàn)流程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09