/*loader*/
.loader {
position: relative;
display: block;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: gray;
margin: 32px auto;
box-shadow: 4px 4px 12px 1.2px rgba(0, 0, 0, 0.2);
-webkit-animation-name: static;
animation-name: static;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: steps(1);
animation-timing-function: steps(1);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.loader:before,
.loader:after {
position: absolute;
content: '';
display: block;
border-radius: inherit;
}
.loader:before {
-webkit-animation-name: static-half;
animation-name: static-half;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: steps(1);
animation-timing-function: steps(1);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.loader:after {
-webkit-animation-name: flip;
animation-name: flip;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
background-color: #226ad9;
border-radius: 32px 32px 0px 0px;
width: 32px;
height: 16px;
left: 0;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
.top {
border-radius: 32px 32px 0px 0px;
width: 32px;
height: 16px;
left: 0;
top: 0;
}
.right {
border-radius: 0px 32px 32px 0px;
width: 16px;
height: 32px;
left: 16px;
top: 0;
}
.bottom {
border-radius: 0px 0px 32px 32px;
width: 32px;
height: 16px;
left: 0;
top: 16px;
}
.left {
border-radius: 32px 0px 0px 32px;
width: 16px;
height: 32px;
left: 0;
top: 0;
}
@-webkit-keyframes flip {
0%,
100.001% {
background-color: #226ad9;
border-radius: 32px 32px 0px 0px;
width: 32px;
height: 16px;
left: 0;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
12.5% {
background-color: #143f81;
border-radius: 32px 32px 0px 0px;
width: 32px;
height: 16px;
left: 0;
top: 0;
-webkit-transform: rotateX(90deg) rotateY(0deg);
transform: rotateX(90deg) rotateY(0deg);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
12.5001% {
background-color: #e87c6b;
border-radius: 0px 0px 32px 32px;
width: 32px;
height: 16px;
left: 0;
top: 16px;
-webkit-transform: rotateX(90deg) rotateY(0deg);
transform: rotateX(90deg) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
25% {
background-color: #cd3820;
border-radius: 0px 0px 32px 32px;
width: 32px;
height: 16px;
left: 0;
top: 16px;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
25.001% {
background-color: #cd3820;
border-radius: 0px 32px 32px 0px;
width: 16px;
height: 32px;
left: 16px;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
37.5% {
background-color: #752012;
border-radius: 0px 32px 32px 0px;
width: 16px;
height: 32px;
left: 16px;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(90deg);
transform: rotateX(0deg) rotateY(90deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
37.5001% {
background-color: #fed165;
border-radius: 32px 0px 0px 32px;
width: 16px;
height: 32px;
left: 0;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(90deg);
transform: rotateX(0deg) rotateY(90deg);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
50% {
background-color: #fcb201;
border-radius: 32px 0px 0px 32px;
width: 16px;
height: 32px;
left: 0;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
50.001% {
background-color: #fcb201;
border-radius: 0px 0px 32px 32px;
width: 32px;
height: 16px;
left: 0;
top: 16px;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
62.5% {
background-color: #fed165;
border-radius: 0px 0px 32px 32px;
width: 32px;
height: 16px;
left: 0;
top: 16px;
-webkit-transform: rotateX(90deg) rotateY(0deg);
transform: rotateX(90deg) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
62.5001% {
background-color: #00321d;
border-radius: 32px 32px 0px 0px;
width: 32px;
height: 16px;
left: 0;
top: 0;
-webkit-transform: rotateX(90deg) rotateY(0deg);
transform: rotateX(90deg) rotateY(0deg);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
75% {
background-color: #019757;
border-radius: 32px 32px 0px 0px;
width: 32px;
height: 16px;
left: 0;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
75.001% {
background-color: #019757;
border-radius: 32px 0px 0px 32px;
width: 16px;
height: 32px;
left: 0;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
89.5% {
background-color: #02fc91;
border-radius: 32px 0px 0px 32px;
width: 16px;
height: 32px;
left: 0;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(90deg);
transform: rotateX(0deg) rotateY(90deg);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
89.5001% {
background-color: #143f81;
border-radius: 0px 32px 32px 0px;
width: 16px;
height: 32px;
left: 16px;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(90deg);
transform: rotateX(0deg) rotateY(90deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
100% {
background-color: #226ad9;
border-radius: 0px 32px 32px 0px;
width: 16px;
height: 32px;
left: 16px;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
}
@keyframes flip {
0%,
100.001% {
background-color: #226ad9;
border-radius: 32px 32px 0px 0px;
width: 32px;
height: 16px;
left: 0;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
12.5% {
background-color: #143f81;
border-radius: 32px 32px 0px 0px;
width: 32px;
height: 16px;
left: 0;
top: 0;
-webkit-transform: rotateX(90deg) rotateY(0deg);
transform: rotateX(90deg) rotateY(0deg);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
12.5001% {
background-color: #e87c6b;
border-radius: 0px 0px 32px 32px;
width: 32px;
height: 16px;
left: 0;
top: 16px;
-webkit-transform: rotateX(90deg) rotateY(0deg);
transform: rotateX(90deg) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
25% {
background-color: #cd3820;
border-radius: 0px 0px 32px 32px;
width: 32px;
height: 16px;
left: 0;
top: 16px;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
25.001% {
background-color: #cd3820;
border-radius: 0px 32px 32px 0px;
width: 16px;
height: 32px;
left: 16px;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
37.5% {
background-color: #752012;
border-radius: 0px 32px 32px 0px;
width: 16px;
height: 32px;
left: 16px;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(90deg);
transform: rotateX(0deg) rotateY(90deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
37.5001% {
background-color: #fed165;
border-radius: 32px 0px 0px 32px;
width: 16px;
height: 32px;
left: 0;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(90deg);
transform: rotateX(0deg) rotateY(90deg);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
50% {
background-color: #fcb201;
border-radius: 32px 0px 0px 32px;
width: 16px;
height: 32px;
left: 0;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
50.001% {
background-color: #fcb201;
border-radius: 0px 0px 32px 32px;
width: 32px;
height: 16px;
left: 0;
top: 16px;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
62.5% {
background-color: #fed165;
border-radius: 0px 0px 32px 32px;
width: 32px;
height: 16px;
left: 0;
top: 16px;
-webkit-transform: rotateX(90deg) rotateY(0deg);
transform: rotateX(90deg) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
62.5001% {
background-color: #00321d;
border-radius: 32px 32px 0px 0px;
width: 32px;
height: 16px;
left: 0;
top: 0;
-webkit-transform: rotateX(90deg) rotateY(0deg);
transform: rotateX(90deg) rotateY(0deg);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
75% {
background-color: #019757;
border-radius: 32px 32px 0px 0px;
width: 32px;
height: 16px;
left: 0;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
75.001% {
background-color: #019757;
border-radius: 32px 0px 0px 32px;
width: 16px;
height: 32px;
left: 0;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
89.5% {
background-color: #02fc91;
border-radius: 32px 0px 0px 32px;
width: 16px;
height: 32px;
left: 0;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(90deg);
transform: rotateX(0deg) rotateY(90deg);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
89.5001% {
background-color: #143f81;
border-radius: 0px 32px 32px 0px;
width: 16px;
height: 32px;
left: 16px;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(90deg);
transform: rotateX(0deg) rotateY(90deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
100% {
background-color: #226ad9;
border-radius: 0px 32px 32px 0px;
width: 16px;
height: 32px;
left: 16px;
top: 0;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
}
@-webkit-keyframes static-half {
0%,
100% {
background-color: #cd3820;
border-radius: 32px 32px 0px 0px;
width: 32px;
height: 16px;
left: 0;
top: 0;
}
25% {
background-color: #fcb201;
border-radius: 0px 32px 32px 0px;
width: 16px;
height: 32px;
left: 16px;
top: 0;
}
50% {
background-color: #019757;
border-radius: 0px 0px 32px 32px;
width: 32px;
height: 16px;
left: 0;
top: 16px;
}
75% {
background-color: #226ad9;
border-radius: 32px 0px 0px 32px;
width: 16px;
height: 32px;
left: 0;
top: 0;
}
}
@keyframes static-half {
0%,
100% {
background-color: #cd3820;
border-radius: 32px 32px 0px 0px;
width: 32px;
height: 16px;
left: 0;
top: 0;
}
25% {
background-color: #fcb201;
border-radius: 0px 32px 32px 0px;
width: 16px;
height: 32px;
left: 16px;
top: 0;
}
50% {
background-color: #019757;
border-radius: 0px 0px 32px 32px;
width: 32px;
height: 16px;
left: 0;
top: 16px;
}
75% {
background-color: #226ad9;
border-radius: 32px 0px 0px 32px;
width: 16px;
height: 32px;
left: 0;
top: 0;
}
}
@-webkit-keyframes static {
0%,
100% {
background-color: #226ad9;
}
25% {
background-color: #cd3820;
}
50% {
background-color: #fcb201;
}
75% {
background-color: #019757;
}
}
@keyframes static {
0%,
100% {
background-color: #226ad9;
}
25% {
background-color: #cd3820;
}
50% {
background-color: #fcb201;
}
75% {
background-color: #019757;
}
}
2016.12.09 10:28 신고
잘참고하고 갑니다. 블로그에 서공적으로 적용했어요
2017.03.01 01:07 신고
도움이 되었습니다 감사합니다.
블로그에 따라 다르지만 주인장님은 과거와 비교해서 기본세팅인 2초 정도로 액티브뷰 수치를 체감하셨나요?
2017.03.01 01:10 신고
액티브뷰는 확실히 오릅니다 rpm은 워낙 블로그 침체기라 비교를 못하고있습니다
2017.05.24 14:03 신고
상단광고는 따로 빼서 동기식으로 빨리 로딩시키는 데도 광고 액티브뷰가 낮아서 로딩이미지를 적용해 보려고 하던차에 많은 도움 됐습니다. 정말 감사합니다.
그런데 로딩이미지 소스는 어디서 가져오는 게 아닌가 보네요. 신기하네요.
모바일용 브라우져에서는 이미지가 보여지는 않지만 일단 지연 되는 것으로 만족 합니다.
특별히 이미지를 더 가져오는 게 아닌 거 같아서 더 좋네요.
2017.05.24 18:23 신고
도움이 됐다니 다행이네요
로딩이미지는 CSS로만 구성됩니다!
잘 안보이신다면 4번항목을 적용하셨는지 확인해보세요~
2017.06.21 23:57 신고
적용이 잘되네요! 잘 사용하겠습니다. 감사합니다~^^
2017.06.25 19:32 신고
감사합니다. 성공적으로 적용 되었고, 저도 액티브뷰가 올랐으면 좋겠어요!
2018.01.31 09:04 신고
무료 배포해주신 스킨 감사하게 잘쓰고 있습니다. 질문이 있는데요. 가장 최신 버전인 + 버전에 적용하려면 어떻게 해야 하는지요?
2018.01.31 09:06 신고
1~3번과정만 적용하시면됩니다~
2018.01.31 09:12 신고
빠른 답변 감사합니다. 그런데 아무리 찾아봐도 <body> 가 보이질 않아서요 어디다 넣어야 할지요?!
2018.01.31 09:13 신고
<body ~~
뒤에뭐가붙어있어도 아랫줄에넣으시면됩니다!
2018.01.31 09:16
비밀댓글입니다
2018.02.16 15:34 신고
PC에서는 적용이 잘 되는데, 모바일에서는 이미지도 보이지 않고, 지연도 안되는것 같은데 모바일에서도 지연하려면 어떻게 해야 하나요?
2018.02.16 15:38 신고
모바일웹자동연결을 꺼주세요~
2018.03.20 20:22
http://hackerc.tistory.com/1119 여기 블로그처럼 애드센스 위에다가 로딩 화면 만들려면 어떡해야 할까요?
2018.03.20 21:55 신고
시간이되면 강좌로 써보겠습니다. 요즘 너무 바빠서요 ㅠㅠ
2020.09.22 14:07 신고
저는 희안한게 이거 적용하고 나면 상단에 뜨던 앵커 광고가 하단에 가는 이유가 무었때문일까요