HTML&CSS | 이미지 없이 로딩중 애니메이션 효과 주기
페이지 정보
작성자 전소현 작성일20-07-01 17:10 조회375회 댓글0건관련링크
본문
<div class="divloading">
<div id="divloadingcm" class="divloadinghc divloadingvc addloading"></div>
</div>
.divloading {
height:100%;
width:100%;
}
.divloadinghc {
width:300px;
left:0; right:0;
margin-left:auto;
margin-right:auto;
}
.divloadingvc {
z-index: 1000;
height:40px;
top: 0;
bottom:0;
margin-top:auto;
margin-bottom:auto;
color:#FF0000;
text-align: center;
font-weight: bold;
font-size: 32px;
}
.addloading {
display: inline-block;
width : 35px;
height: 35px;
border: 5px solid rgba(0,0,0,.3);
border-radius: 50%;
border-top-color: #3366FF;
animation: spin 2s ease-in-out infinite;
-webkit-animation: spin 1s ease-in-out infinite;
}
<div id="divloadingcm" class="divloadinghc divloadingvc addloading"></div>
</div>
.divloading {
height:100%;
width:100%;
}
.divloadinghc {
width:300px;
left:0; right:0;
margin-left:auto;
margin-right:auto;
}
.divloadingvc {
z-index: 1000;
height:40px;
top: 0;
bottom:0;
margin-top:auto;
margin-bottom:auto;
color:#FF0000;
text-align: center;
font-weight: bold;
font-size: 32px;
}
.addloading {
display: inline-block;
width : 35px;
height: 35px;
border: 5px solid rgba(0,0,0,.3);
border-radius: 50%;
border-top-color: #3366FF;
animation: spin 2s ease-in-out infinite;
-webkit-animation: spin 1s ease-in-out infinite;
}
[주소복사] https://www.goodsweb.kr/?u=D41W8V26
SNS 알리기
핀터레스트
텔레그램로
블로그로
페이스북
트위터
카카오스토리
카톡 공유
관련 블로그
로딩중