LoaderView

show()/hide()メソッドを備えたLoadingを管理するView

var BaseView = require('./BaseView');

/**
 * LoaderView Class Description v1.1.0
 * @fileoverview show()/hide()メソッドを備えたLoadingを管理するView
 *    対応ブラウザはモダンブラウザ（IE8以上）
 */
var LoaderView = (function () {
  var constructor = function () {
    this.fadeSpeed = 400;
  };
  var proto = constructor.prototype = new BaseView();
  proto.show = function () {
    this.$el.hide().removeClass('hide').fadeIn(this.fadeSpeed);
    return this;
  };
  proto.hide = function () {
    this.$el.fadeOut(this.fadeSpeed);
    return this;
  };
  return constructor;
})();

Usage

HTML

<div id="loaderView" class="js-loader"></div>

Tepmplate

// modalTemplate.ejs
<div class="js-loader-loaderWrapper">
  <div class="js-loader-throbbers_page">
    <ul class="js-loader-throbbers_list">
      <li>
        <div class="js-loader-throbber js-loader-throbber_large"></div>
      </li>
    </ul>
  </div>
</div>

Sass/Stylus

/*
 * loader
 */

.js-loader {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  .js-loader-wrapper{
    background-color: rgba(0, 0, 0, 0.8); // 背景色を変える場合はここ
  }
  * {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    outline: none;
    list-style: none;
  }
}

.js-loader-wrapper{
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 1);
  .js-loader-throbbers_page {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;

    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    width: 100%;
    height: 100%;
    position: fixed;
  }
  ul.js-loader-throbbers_list {
    margin-top: -100px
  }
  .js-loader-throbbers_page .js-loader-thobbers_container {
    display: block;

    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;

    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    position: relative;
    width: 550px;
    height: 450px;
    background: #f0f4f5;
  }
  .js-loader-throbbers_page .js-loader-thobbers_container ul.js-loader-throbber_containers {
    display: block;
    position: relative;
    width: 300px;
  }
  .js-loader-throbbers_page .js-loader-thobbers_container ul.js-loader-throbber_containers > li {
    width: 100%;
    height: 70px;
    display: block;
    position: relative;
    border-radius: 2px;
    margin: 20px 0 20px 0;
  }
  .js-loader-throbbers_page .js-loader-thobbers_container ul.js-loader-throbber_containers > li.js-loader-throbbers_dark_bg {
    background: #363b4a;
  }
  .js-loader-throbbers_page .js-loader-thobbers_container ul.js-loader-throbber_containers > li > ul.js-loader-throbbers_list {
    display: block;
    position: relative;

    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;

    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;

    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: space-between;

    width: 80%;
    height: 80%;
    margin: 0 auto;
  }
  .js-loader-throbbers_page .js-loader-thobbers_container ul.js-loader-throbber_containers > li > ul.js-loader-throbbers_list > li {
    width: 45px;
    height: 70px;
    display: block;
    position: relative;
  }
  .js-loader-throbbers_page .js-loader-throbber {
    width: 100%;
    height: 100%;

    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;

    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;

    justify-content: center;
  }
  .js-loader-throbbers_page .js-loader-throbber:after {
    display: block;
    position: relative;
    width: 20px;
    height: 20px;
    animation: rotate 0.6s linear infinite;
    border-radius: 100%;
    border-top: 2px solid #545a6a;
    border-bottom: 2px solid #d4d4db;
    border-left: 2px solid #545a6a;
    border-right: 2px solid #d4d4db;
    content: '';
    opacity: .5;
  }
  .js-loader-throbbers_page .js-loader-throbber.js-loader-throbber_large:after {
    width: 40px;
    height: 40px;
  }
  $keyframe-name = rotate
  @keyframes rotate {
    0% {
      transform: rotateZ(-360deg);
    }
    100% {
      transform: rotateZ(0deg);
    }
  }
}

JS

var loaderTmpl = require('loaderTemplate.ejs');
var loaderView = new LoaderView();
loaderView.init({
  el: '#loaderView',
  template: loaderTmpl
});

// 削除する場合は以下のメソッド
// loaderView.destroy();