$ animate를 사용하여 페이지/양식 잠그기. angularjs

진행 막대 또는 회 전자가있는 양식 보관함을 동적으로 생성해야합니다. https://github.com/chieffancypants/angular-loading-bar/blob/master/src/loading-bar.css에는 회 전자에 대한 코드가 있지만 양식을 잠그지 않고 회 전자 만 표시합니다.

회 전자가로드 된 후에 양식 페이지를 잠글 수있는 방법이 없으므로 더 이상 작업이 수행되지 않습니다. 나는 이러한 구성 요소에 오픈 소스를 사용하여 권 해드립니다

#loading-bar-spinner { 
    pointer-events: none; 
    -webkit-pointer-events: none; 
    -webkit-transition: 350ms linear all; 
    -moz-transition: 350ms linear all; 
    -o-transition: 350ms linear all; 
    transition: 350ms linear all; 
} 

#loading-bar.ng-enter, 
#loading-bar.ng-leave.ng-leave-active, 
#loading-bar-spinner.ng-enter, 
#loading-bar-spinner.ng-leave.ng-leave-active { 
    opacity: 0; 
} 

#loading-bar.ng-enter.ng-enter-active, 
#loading-bar.ng-leave, 
#loading-bar-spinner.ng-enter.ng-enter-active, 
#loading-bar-spinner.ng-leave { 
    opacity: 1; 
} 

#loading-bar-spinner { 
    display: block; 
    position: fixed; 
    z-index: 10002; 
    top: 300px; 
    left: 200px; 


} 

#loading-bar-spinner .spinner-icon { 
    width: 14px; 
    height: 14px; 

    border: solid 22px yellow; 
    border-top-color: #29d; 
    border-left-color: #29d; 
    border-radius: 120px; 

    -webkit-animation: loading-bar-spinner 400ms linear infinite; 
    -moz-animation: loading-bar-spinner 400ms linear infinite; 
    -ms-animation:  loading-bar-spinner 400ms linear infinite; 
    -o-animation:  loading-bar-spinner 400ms linear infinite; 
    animation:   loading-bar-spinner 400ms linear infinite; 
} 

@-webkit-keyframes loading-bar-spinner { 
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 
} 
@-moz-keyframes loading-bar-spinner { 
    0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 
    100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } 
} 
@-o-keyframes loading-bar-spinner { 
    0% { -o-transform: rotate(0deg); transform: rotate(0deg); } 
    100% { -o-transform: rotate(360deg); transform: rotate(360deg); } 
} 
@-ms-keyframes loading-bar-spinner { 
    0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } 
    100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } 
} 
@keyframes loading-bar-spinner { 
    0% { transform: rotate(0deg); transform: rotate(0deg); } 
    100% { transform: rotate(360deg); transform: rotate(360deg); } 
}

출처

2014-06-06 rahulmr

는 회 전자를

this.parentSelector = 'body'; 
var $parentSelector = this.parentSelector, 
var $parent = $document.find($parentSelector); 
       spinner = angular.element('<div id="loading-bar-spinner"><div class="spinner-icon"></div></div>'); 



{ 
$animate.enter(spinner, $parent); 
}

CSS를 시작

.
나는 blockUI과 좋은 경험이있다.

특징 :

당신은 당신의 자신의 스피너를 추가 할 수 있습니다.
각 서버 호출 (기본적으로)에서 회 전자를 실행하도록 결정하거나 직접 제어 할 수 있습니다.
\ config를 모듈로 통합하는 것이 매우 간단합니다.

출처

2014-06-06 10:12:21

$ animate를 사용하여 페이지/양식 잠그기. angularjs

답변

관련 문제