vue: block ui example

vue 3 + pure js & css + fontawesome 4.7

by cactus77kiki

HTML

<script src="https://unpkg.com/[email protected]"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<style></style>
<div id="appdiv">
ABCDEFGJUOIOYHLKHK
ABCDEFGJUOIOYHLKHK
ABCDEFGJUOIOYHLKHK
ABCDEFGJUOIOYHLKHK
ABCDEFGJUOIOYHLKHK
<br/>
<button v-on:click="clickit">
  click
</button>
<div class="loading-overlay" v-if="showloading">
    <div class="loading">
      <i class="fa fa-spinner fa-pulse fa-5x fa-fw bluespin" aria-hidden="true"></i><br/>
      <!--<span style="font-size: 25px;" class="bluespin"> 請稍待</span>-->
    </div>
</div>

</div>

CSS

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #E1E7E7;
    opacity: 0.7;
}
.loading {
    font-size: 20px;
    text-align: center;
    color: black;
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
}
.bluespin{
  color: #0B26F5;
}

JavaScript

/*
reference: http://jsfiddle.net/ucPLW/
*/
var vapp = Vue.createApp({
            data() {
                return {
                	showloading: false,
                }
            },
            computed:{
            	
            },
            methods:{
            	clickit(){
              	this.showloading = true;
                let self = this;
                setTimeout(function() {
                	self.showloading = false;
                },5000);
              }
            },
            created(){
            
            }
     }).mount('#appdiv')