dimmer + loader

by shigetak

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
  <div class="ui segment"  id="go_cart">
    <h3 class="ui header red">    dimmer area 1    </h3>

<div class="circular ui icon button">
  <i class="icon child "></i>
</div>

<div class="ui toggle button ">
  <i class="icon male "></i> dimmer area 1
  <i class="icon female "></i>
</div>
</div>


  <div class="ui red blurring red segment red">
    <h3 class="ui header red">    dimmer area 2    </h3>

    <div class="compact ui floated large yellow button  position" id="footer_go_cart">
      <span>選択した商品のレジにすすむ dimmer Start !</span>
    </div>

    <div class="ui inverted dimmer">
      <div class="content">
        <div class="center">
          <div class="ui text loader red">
            <h3>しばらくお待ちください。</h3>
          </div>
        </div>
      </div>
    </div>
  </div>

JavaScript

$("[id$='footer_go_cart']").click(function() {

  $('.item').dimmer('show'); // active dimmer 
  $('.segment').dimmer('show'); // active dimmer

return false;
});

$("meta[name='viewport']").attr('content', 'width=375');