Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
10
Help us understand the problem. What is going on with this article?
@frost_star

AngularJS+spin.jsでOverlay(前編)

More than 5 years have passed since last update.

ajaxのように非同期な処理を実行中は、こんな画像(アニメーション)をオーバーレイ表示させて操作を受け付けなくするということをやりたい。
overlay.png

jQueryだと割と簡単にできた気もしますが、今回はAngularJSでやりたい。
さらに、ぐるぐる回るアニメーションを表示させるspin.jsを使いたい。

spin.jsを入れる

まずはspin.jsを導入。
リンク先の公式サイトからspin.min.jsを落として来て、配置と読込を済ませる。
spin.jsは依存ライブラリがないので、jQueryを使ったりしていなくても大丈夫。

angular-spinnerを入れる

次に、AngularJSでspin.jsを使うためにanguler-spinnerを導入します。
これも、リンク先のGitHubからangular-spinner.min.jsを持ってきて、配置と読込を行えばOK。

とりあえず試す

spin.jsとangular-spinnerが入れば、とりあえずぐるぐる回るアニメーションは表示できるようになります。
依存モジュールとして、angularSpinner、サービス名としてusSpinnerServiceを渡すことで、angular-spinnerを使用することができます。

angular.module("App",["angularSpinner"])
    .controller("appController",
            ["usSpinnerService",
                function(usSpinnerService){
                    usSpinnerService.spin('spinner');
                    //usSpinnerService.stop('spinner'); //停止するとき
                }
            ]
    );
<span us-spinner="{radius:30, width:8, length: 16}" spinner-key="spinner"></span>

usSpinnerServiceサービスのspinメソッドにspinner-keyを渡すことで、アニメーションが表示されます。
消すときはstopメソッドにspinner-keyを渡します。

これによって、画面にアニメーション表示はできますが、特に操作が制限されるわけではなく、背景もそのままです。
背景を薄暗くして操作をできないようにするやり方についてはまた次回。

10
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
frost_star
まだまだ半人前プログラマー。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
10
Help us understand the problem. What is going on with this article?