HOME 개발팁 이미지 없이 로딩중 애니메이션 효과 주기

프로그램 작업하다 좋은 팁, 정보, 테스트를 기록하는 곳입니다.


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;
}

[주소복사] https://www.goodsweb.kr/?u=D41W8V26
SNS 알리기
핀터레스트
텔레그램로
블로그로
카카오스토리
카톡 공유

관련 블로그
로딩중


3명  IP : 3.219.♡.163
001 17.♡.219.97 인터넷 창 띄우기 IP 다르게 적용하기 - 패키지몰
(/bbs/board.php?bo_table=pmall&wr_id=13)
002 220.♡.126.33 테이블 및 tr td 라인 색상 변경하기 - 개발팁
(/bbs/board.php?bo_table=tip&wr_id=65)
003 66.♡.66.34 나만의 이미지 (하이브리드 앱) - 프로그램 개발실
(/bbs/board.php?bo_table=service&wr_id=22)

접속자
  • 오늘 : 163
  • 어제 : 263
  • 최대 : 874
  • 전체 : 394,042

검색로봇(Robots) 최근 방문시간
  • NAVER : 6시간 전
  • BING : 7시간 전
  • GOOGLE : 16시간 전
  • DAUM : 4일 전

ETH : 0x8abf3B748ab78828AE07685e4fd53d1a606f18D3



페이스북 네이버 블로그 굿스웹 쇼핑몰 네이버 카페 굿스웹 트위터 굿스웹 티스토리 Google Play