## 所需資源 [boodcdn的pjax的js代碼]([https://www.bootcdn.cn/jquery.pjax/](https://www.bootcdn.cn/jquery.pjax/)) 必須資源:**jQuery.js** 加載動畫`pjaxcss`: ```css #loading { background-color: rgba(238, 238, 238, 0.6); display: none; position: absolute; left: 0; top: 0; right: 0; z-index: 2000; bottom: 0; padding-top: 10%; } #loading .spinner { margin: 100px auto; width: 50px; height: 60px; text-align: center; font-size: 10px; } #loading .spinner > div { background-color: rgba(0, 0, 0, 0.2); height: 100%; width: 6px; display: inline-block; -webkit-animation: stretchdely 1.2s infinite ease-in-out; animation: stretchdely 1.2s infinite ease-in-out; } #loading .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } #loading .spinner .rect3 { -webkit-animation-delay: -1s; animation-delay: -1s; } #loading .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } #loading .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes stretchdely { 0%,40%,100% { -webkit-transform: scaleY(0.4); } 20% { -webkit-transform: scaleY(1); } } @keyframes stretchdely { 0%,40%,100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1); -webkit-transform: scaleY(1); } } ``` ## 使用 >在使用模板繼承中，在基礎頁面里添加公共區域部分的代碼: ```html <div id="pjax-container"> <div id="loading"> <div class="spinner"> <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div> </div> </div> {block name="content"} {/block} </div> ``` >引入js之后進行js處理 ```javascript <script> // 實現頁面無刷新跳轉url $(document).pjax('a[pjax]', '#pjax-container', {fragment: "#pjax-container", timeout: 5000}); $(document).on('pjax:send', function() { $("#loading").show(); }); $(document).on('pjax:complete', function () { $("#loading").hide(); }) </script> ```