DOMの塗りつぶし中にローディングスピナーを表示

Question

私はcordovaのアンドロイドアプリケーションで作業していますが、ユーザーの通知がロードされている間に何らかの読み込みメッセージ/スピナーを表示したいときに、 DOMにはすべての通知がペイントされています。

現在、ajax呼び出しが完了している間、待ち時間中にスピナーを表示するために、いくつかの場所でcg-busyディレクティブを使用しています。しかし、この場合、cg-busyはajax呼び出しが非常に速く、長い時間がかかる絵画であるため、私たちが望むものを達成できません。

私の質問はこれです：DOMがペイントされている間にcg-busyにスピンナーを表示する方法はありますか？そうでない場合、ペイント中にスピナーを表示するのに似たものがありますか？

Answer 1

私がしたことは、角度が初期化されるまで単純なCSSアニメーションを見せていることです。そこにはプレーンなCSS読み込みアニメーションがたくさんありますが、あなたはちょうどGoogleを使うことができます。この例ではthoseのいずれかを使用します。

これはどのように機能しますか？私はHTMLに以下のdivを追加している：

<div class="loadingAnimation" ng-show="::false"></div> 

もCSS次の角度が、それはNG-ショーを評価し、読み込みのアニメーションを非表示になります初期化完了すると

.loadingAnimation { 
    width: 40px; 
    height: 40px; 
    margin: 100px auto; 
    background-color: #3b454b; 
    border-radius: 100%; 
    -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; 
    animation: sk-scaleout 1.0s infinite ease-in-out; 
} 

@-webkit-keyframes sk-scaleout { 
    0% { 
     -webkit-transform: scale(0); 
    } 

    100% { 
     -webkit-transform: scale(1.0); 
     opacity: 0; 
    } 
} 

@keyframes sk-scaleout { 
    0% { 
     -webkit-transform: scale(0); 
     transform: scale(0); 
    } 

    100% { 
     -webkit-transform: scale(1.0); 
     transform: scale(1.0); 
     opacity: 0; 
    } 
} 

を。 ::はパフォーマンスの向上に過ぎません。

あなたが望む動作であるかどうかは100％確信していないので、ng-showの条件を微調整したいかもしれません。しかし、私はあなたがそのアイディアを得たことを願っています