특정 링크 클릭시 로딩 spinner > 자료실

자료실

자료실

특정 링크 클릭시 로딩 spinner

페이지 정보

profile_image
작성자 최고관리자
댓글 0 조회 1,018회 작성일 23-02-22 09:24
작성일 23-02-22 09:24

본문

1) css
.sub-mb-sub-ul-link-loading {position: absolute;top:0;left:0;width: 100%;height: 100%;background:rgba(0, 0, 0, 0.7);z-index: 9999;display:none;}

@keyframes sub-link-spinner {

	from {transform: rotate(0deg); }

	to {transform: rotate(360deg);}

}1)

.sub-mb-sub-ul-link-loading .sub-link-spinner {

box-sizing: border-box;position: absolute;top: 50%;left: 50%;width: 64px;height: 64px;margin-top: -32px;margin-left: -32px;border-radius: 50%;

border: 8px solid transparent;border-top-color: #f19022;border-bottom-color: #f19022;animation: sub-link-spinner .8s ease infinite;}

2)html
<div class="sub-mb-sub-ul-link-loading"><div class="sub-link-spinner"></div></div>


3) javascript
// 2차 메뉴 클릭시 진동

$(document).on('click', '.ul-mobile-list .mb-sub-ul .li-sub-ul a', function(e){

	var linkStr = $.trim( $(this).attr('href') );

	cmaCallVibrate(100);// 진동 수행 1000 = 1초, 100 : 0.1초가 적당


	if(linkStr == '#' || linkStr == '#none') {

		//

	} else {

		// 로딩 spinner

		$('.mobile_menu_small_login').css('visibility', 'hidden');

		$('.common_mobile_menu_close').css('visibility', 'hidden');

		$('.sub-mb-sub-ul-link-loading').show();


		$('body').css({'overflow':'hidden', 'pointer-events':'none', 'touch-action':'none'});

	}

});
추천 0 비추천 0

  • 회사 :
  • 대표 :
  • 주소 :
  • 메일 : admin@mysample.com
  • 사업자 등록번호 :
Copyright © cginjs.com All rights reserved.
notice