Mprogress.js를 사용하여 머티리얼 디자인 진행률 표시 줄 만들기

Google의 재료 디자인 웹을 근본적으로 변화 시켰습니다. 그것은 공통 디자인 언어 UI 디자이너가 모든 웹 사이트 및 모바일 앱에 적용 할 수 있음.

이 머티리얼 디자인 추세로 인해 인기있는 Materialize 프레임 워크를 비롯한 많은 라이브러리가 생겨났습니다. 그리고 가장 시원한 신소재 프로젝트 나는 찾았다. Mprogress.js.

이 JavaScript 라이브러리는 재료 스타일 진행률 표시 줄 순수한 CSS와 자바 스크립트 사용하기. 의존성 없음, 말도 안돼. 모든 웹 사이트 또는 웹 응용 프로그램과 일치하는 재질 디자인으로 간단한 로딩 (및 사전로드).

설정은 매우 간단하고 두 개의 파일 만 필요합니다.: Mprogress의 CSS 및 JS 스크립트.

너는 할 수있다. 둘 다 다운로드하십시오. GitHub 레포 또는 패키지 관리자 사용 npm 또는 Bower와 같은 거기에서부터 새 Mprogress 객체 만들기 로더 시작을 알리십시오..

이것은 말 그대로 할 수 있습니다. 한 줄의 코드:

 var mprogress = 새로운 Mprogress ( 'start'); 

기타 속성 진행률 막대의 애니메이션 타이밍, 속도 또는 표시 색상을 변경하는 데 적용 할 수 있습니다. 이 구성을 사용하면 맞춤 템플릿 만들기 기본 재질 디자인 스타일을 기반으로합니다. 최고!

엿보기 데모 페이지 이 로더가 실제로 작동하는지 확인하십시오. 눈에 띄는로드 바가 아니지만 처음부터 다시 만들 필요없이 멋진 솔루션을 제공합니다..

다음과 같은 메소드를 실행할 수 있습니다. 세트() 에 백분율을 설정하다 또는 inc () 에 로딩 바를 증가시키다.. HTTP 로더를 만들려면 프로그래밍 방식으로 처리 할 수 ​​있지만 JavaScript에서는 추가 작업이 필요합니다..

Mprogress.js의 아름다움은 그것의 단순함. 데이터를 구조화하는 방법이나로드해야 할 것을 알려주지는 않습니다. 페이지를로드하거나 파일 업로드를 처리 할 수 ​​있습니다. 또는 사용자가 페이지 상단에서 얼마나 아래로 스크롤했는지 추적 할 수 있습니다..

이 라이브러리로 할 수있는 일이 너무 많습니다. 종속성이 없다. 모든 웹 프로젝트에 사용할 수 있습니다. 시작하려면 MProgress 저장소 GitHub에서 선적 서류 비치.