scss ぐるぐる回るローディング

Posted 2021-05-18

<div class="loading-area">
  <span class="spin"></span>
  <p id="adload" class="label">さらに見る</p>
  </div>

// ローディングの高さ
$loading-area-height: 6.5em!default;

//中心テキストの位置
$loading-labe-position: -4em!default;

.loading-area {
	@include box-sizing(content-box);
	position: relative;
	margin: 0px auto 20px;
	padding: 20px 0;
	text-align: center;
	height: $loading-area-height;
	.spin {
		@include border-radius($loading-area-height);
		position: relative;
		display: block;
		height: $loading-area-height;
		width: $loading-area-height;
		margin: 0 auto;
		border: 3px dotted transparent;
		border-color: transparent $base-smoke-color transparent $base-smoke-color;
		@include animation-name(rotate-loading);
		@include animation-duration(2.5s);
		@include animation-timing-function(linear);
		@include animation-iteration-count(infinite);
		@include transform(origin(50% 50%));
	}
	.label {
		position: relative;
		display: block;
		margin-top: $loading-labe-position;
		color: $base-theme-color;
		font-weight: bold;
		@include animation-name(loading-label-opacity);
		@include animation-duration(2s);
		@include animation-timing-function(linear);
		@include animation-iteration-count(infinite);
	}
}

@include keyframes(rotate-loading) {
	0% 	{@include transform(rotate(0deg));}
	100% {@include transform(rotate(360deg));}
}
@include keyframes(loading-label-opacity) {
	0% 	{opacity: 0.2;}
	20% {opacity: 0.2;}
	50% {opacity: 1;}
	100% {opacity: 0.2;}
}