show hide loading image

show hide loading image

by jihoon kim

HTML

<input class="btn btn-primary loading" type="button" value="로딩">
<div class="softm-ui-layer progress" style="display:none"><div class="softm-ui-innerlayer"><div class="softm-icon-loading"><img src="http://softm.net/oke_sample/images/viewLoading.gif"></div></div></div>

<div class="mo-ui-snackbar" style="display: none; z-index: 1000; left: 0px;"><p class="message"></p></div>

CSS

.softm-ui-layer {
    background: rgba(0,0,0,0.6);
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: -1px;
    z-index: 9999;
    height:100%;
}

.softm-icon-loading {
    width:60px;height:60px; 
    position:absolute;
	left:50%;
	top:50%;

	-webkit-animation-name: example;
	-moz-animation-name: example;
	-o-animation-name: example;
	-ms-animation-name: example;
	animation-name: example;

	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	-o-animation-duration: 2s;
	-ms-animation-duration: 2s;
	animation-duration: 2s;

	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	-ms-animation-timing-function: linear;
	animation-timing-function: linear;

	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	animation-iteration-count: infinite;

}

JavaScript

function showLoading() {
    //	if(isBrowser) {
    $('.softm-ui-layer.progress').show();
    // } else {
    // 	if ( typeof(Android) !== "undefined") {
    // 		Android.showLoading();
    // 	}
    // }
}

function hideLoading() {
    window.setTimeout(function() {
        //		if(isBrowser) {
        $('.softm-ui-layer.progress').hide();
        //		} else {
        //			if ( typeof(Android) !== "undefined") {
        //			  Android.hideLoading();
        //			}
        //		}
    }, 100);
}

$("body").on("click", ".loading", function() {
    console.log($(this).val());
    showLoading();
    setTimeout(function() {
        hideLoading();
    }, 500);
});