這款進度條最早應(yīng)用于Micro-M Theme的Navbar下方，不過當時的實現(xiàn)方式還是比較復(fù)雜的。
現(xiàn)在，Mike現(xiàn)在采用一個叫Pace小插件來獲得網(wǎng)頁加載進度條，在頁面中引入 pace.js 和您所選擇主題的 CSS 文件，就可以讓你的頁面擁有漂亮的加載進度和 Ajax 導(dǎo)航效果。不需要掛接到任何代碼，自動檢測進展。
可以選擇顏色和多種效果，有簡約，閃光燈，MAC OSX，左側(cè)填充，頂部填充，計數(shù)器和彈跳等等。
在https://github.com/HubSpot/pace/tree/master/themes還有很多主題可供選擇。
添加方法
1.在網(wǎng)頁頭部處引入
- <head>
- <script src="/pace/pace.js"></script>
- <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />
- </head>
2.在Style.css中添加你中意的效果的CSS
這是我目前使用的一款：
- .pace {
- -webkit-pointer-events: none;
- pointer-events: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- user-select: none;
- }
-
- .pace-inactive {
- display: none;
- }
-
- .pace .pace-progress {
- background: #ddd;
- position: fixed;
- z-index: 100;
- top: 0;
- left: 0;
- height: 2px;
- }
-
- .pace .pace-progress-inner {
- display: block;
- position: absolute;
- rightright: 0px;
- width: 100px;
- height: 100%;
- box-shadow: 0 0 10px #ddd, 0 0 5px #ddd;
- opacity: 1.0;
- -webkit-transform: rotate(3deg) translate(0px, -4px);
- -moz-transform: rotate(3deg) translate(0px, -4px);
- -ms-transform: rotate(3deg) translate(0px, -4px);
- -o-transform: rotate(3deg) translate(0px, -4px);
- transform: rotate(3deg) translate(0px, -4px);
- }
-
- .pace .pace-activity {
- display: block;
- position: fixed;
- z-index: 100;
- top: 15px;
- rightright: 15px;
- width: 14px;
- height: 14px;
- border: solid 2px transparent;
- border-top-color: #ddd;
- border-left-color: #ddd;
- border-radius: 10px;
- -webkit-animation: pace-spinner 400ms linear infinite;
- -moz-animation: pace-spinner 400ms linear infinite;
- -ms-animation: pace-spinner 400ms linear infinite;
- -o-animation: pace-spinner 400ms linear infinite;
- animation: pace-spinner 400ms linear infinite;
- }
-
- @-webkit-keyframes pace-spinner {
- 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
- 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
- }
- @-moz-keyframes pace-spinner {
- 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
- 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
- }
- @-o-keyframes pace-spinner {
- 0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
- 100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
- }
- @-ms-keyframes pace-spinner {
- 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
- 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
- }
- @keyframes pace-spinner {
- 0% { transform: rotate(0deg); transform: rotate(0deg); }
- 100% { transform: rotate(360deg); transform: rotate(360deg); }
- }
本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請
點擊舉報。
