echajoa/include/loading_dim.html

<div class="loading_box ">
	<div class="loading_content">
		<div class="circle">

		</div>
		<div class="title2">이차조아 +</div>
	</div>
</div>



<style>
	.loading_box:after {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 998;
	}

	#loading {
		top: 0px !important;
		left: 0px !important;
		transform: translate(0px, 0px) !important;
		width: 100%;
		height: 100%;
	}

	.loading_box {
		width: 245px;
		height: 108px;
		margin: 0 auto;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-top: -54px;
		margin-left: -122.5px;
		z-index: 9999;
	}

	.loading_box .title3 {
		font-size: 25px;
		line-height: 25px;
		text-align: center;
		margin-top: 10px;
		color: #fff;
	}

	.loading_box .loading_content {
		background: #1E75FF;
		position: relative;
		z-index: 99999;
		/* width:205px;
  height:88px; */
		width: 245px;
		height: 108px;
		border-radius: 108px;
	}

	.loading_box .loading_content .circle {
		width: 98px;
		height: 98px;
		position: absolute;
		top: 5px;
		background-color: #fff;
		left: 5px;
		z-index: 9;
		border-radius: 98px;
		overflow: hidden;
		animation: boxloc 8s infinite;
	}

	.loading_box .loading_content .circle .cicle_inner {
		width: 150px;
		height: 150px;
		position: relative;
		z-index: 1;
	}

	.loading_box .loading_content .title2 {
		font-size: 13px;
		position: absolute;
		bottom: 10px;
		font-weight: bold;
		left: 30px;
		color: #dc4123;
		color: #fff;
		padding: 0px !important;
		background: transparent !important;
	}

	.box {
		width: 150px;
		height: 350px;
		border-radius: 5px;
		background: rgba(240, 77, 48, 1);
		position: relative;
		overflow: hidden;
		transform: translate3d(0, 0, 0);
		animation: boxloc 8s infinite;
	}

	.wave_t {
		position: absolute;
		top: 150px;
		width: 150px;
		height: 150px;
	}

	.wave {
		opacity: 1;
		position: absolute;
		top: 3%;
		left: 50%;
		background: rgba(0, 0, 0, 1);
		width: 280px;
		height: 280px;
		margin-left: -140px;
		margin-top: -140px;
		transform-origin: 50% 48%;
		border-radius: 30%;
		animation: drift 2000ms infinite linear;
	}

	.wave.-three {
		animation: drift 4000ms infinite linear;
		opacity: .3;
	}

	.wave.-two {
		animation: drift 000ms infinite linear;
		opacity: .1;
	}



	@keyframes drift {
		from {
			transform: rotate(0deg);
		}

		from {
			transform: rotate(360deg);
		}
	}

	@keyframes boxloc {
		0% {
			left: 5px;
		}

		80% {
			left: 141px;
		}

		100% {
			left: 5px;
		}
	}
</style>