이 두 플러그인은 로딩 진행 애니메이션에 관한 것입니다. 오늘은 두 로딩 진행 플러그인인 Pace.js와 NProgress.js에 대해 간략히 살펴보겠습니다. 관심 있는 친구들은 이 두 플러그인을 함께 살펴보세요. 플러그인은 모두 로딩 진행 애니메이션에 관한 것입니다. 적어도 저에게는 각각의 장점이 있습니다. 오늘 저는 로딩 진행 애니메이션을 만지작거리고 (이 두 가지) 로딩 진행 애니메이션을 많이 공부했습니다. 로딩 진행 애니메이션에 대한 사전 이해가 있는 것 같습니다.
NProgress.js
NProgress는 jquery를 기반으로 하며 버전은 >1.8
이어야 합니다. API:
NProgress.start() — 진행률 표시줄 시작
NProgress.set(0.4) — 진행률을 특정 항목으로 설정 백분율 위치 NProgress.inc() — 진행률을 조금씩 높입니다
NProgress.done() — 진행률 표시줄을 완료됨으로 표시
소개:
<link rel="stylesheet" type="text/css" href="css/NProgress.css" rel="external nofollow" > <script src="js/NProgress.js" type="text/javascript"></script><br>//还有jquery要引入进来
사용:
<script> $(function() { NProgress.start(); $(window).load(function() { NProgress.done(); }); </script>
사용자 정의 애니메이션 스타일:
스타일 쓰기 우리는 스크립트 태그에서 이것은 약간의 트릭이라고 정의했습니다.
<script type="text" id="myId"><br> <p class="splash card"><br> <p class="lead" style="text-align:center">不要回来,马上走开...</p> <p class="progress"> <p class="mybar" role="bar"> </p> </p> </p><br></script>
이것은 css
html,body,iframe{ margin: 0; padding: 0; } #nprogress{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #f7f7f7; z-index: 999; } .spinner-icon{ display: none!important; } .splash { position:absolute; top:40%; left:0; right:0; margin: auto; } .splash img { display: block; margin-left: auto; margin-right: auto; height: 100px; width: 100px; } .card { background-color: #f7f7f7; padding: 20px 25px 15px; margin: 0 auto 25px; width: 380px; } .mybar { background: #29d; height:10px; } .progress { height: 10px; overflow: hidden; }
js 코드가 다음과 같습니다:
<script type="text/javascript"> $(function(){ NProgress.configure({ template: $('#myId').html() // template是用来设置动画样式的属性 }); NProgress.start(); }); $(window).load(function(){ NProgress.done(); }) </script>
요약: 애니메이션이 시작되는 시점과 끝나는 시점을 js에서 제어하고 로드된 애니메이션 스타일을 제어합니다.
사용자 정의 스타일의 두 가지 핵심 포인터는 역할 속성입니다.
role=bar: 수평 로딩 바
role=spinner 회전하는 작은 원
샘플 2: (css 생략)
<script type="text" id="myId"> <em id="__mceDel"><em id="__mceDel"><p class="bar" role="bar" style="display=block"><br> <p class="peg"></p><br> </p><br> <p class="spinner" role="spinner"><br> <p class="spinner-icon"></p><br> </p></em></em> </script>
js:
API :
Pace.start: 진행률 표시줄 표시를 시작합니다. AMD 또는 Browserify를 사용하여 모듈을 로드하지 않는 경우 기본적으로 실행됩니다.
Pace.restart: 진행률 표시줄이 다시 로드되어 표시됩니다.Pace.stop: 진행률 표시줄을 숨기고 로딩을 중지합니다.
Pace.track: 하나 이상의 요청 작업을 모니터링합니다.
Pace.ignore: 하나 이상의 요청 작업을 무시합니다.
사용법:
<head> <script src="/pace/pace.js"></script> <link href="/pace/themes/pace-theme-barber-shop.css" rel="external nofollow" rel="stylesheet" /> <br> <!-- 此处的css样式就决定了加载进度动画的样式 --> </head>
애니메이션 스타일 변경:
pace는 이미 다양한 종류의 로딩 진행 애니메이션을 디자인했기 때문에 CSS 파일만 변경하면 됩니다.
요약: pace는 파일을 직접 가져올 수 있다는 장점이 있습니다. 그게 다입니다. 직접 코드를 작성할 필요가 없습니다. 로딩 진행 애니메이션이 제공됩니다. 공식 웹사이트에서 제공하는 로딩 진행 애니메이션에는 마스크 레이어가 없습니다.
물론 직접 설정할 수도 있습니다(방법은 모르겠습니다).
위 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
ajax를 사용하여 vue.js에서 페이지를 렌더링하는 방법ajax 요청 + vue.js 렌더링 + 페이지 로딩Vue.js 실행 시 페이지 깜박임 문제를 해결하는 방법 데이터를 표시합니다위 내용은 Pace.js 및 NProgress.js와 함께 로딩 진행 플러그인을 사용하는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!