일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- javascript
- CGIMALL
- 해피CGI
- CSS
- 홈페이지
- #쇼핑몰
- #홈페이지
- 웹솔루션
- jquery
- #image
- #해피CGI
- 홈페이지제작
- #jQuery
- #동영상
- happycgi
- #업종별
- #홈페이지제작
- 사이트제작
- #happycgi
- #이미지
- 게시판
- 쇼핑몰
- 솔루션
- #뉴스
- #CSS
- #웹솔루션
- #솔루션
- php
- #cgimall
- 해피씨지아이
- Today
- Total
목록loading (7)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
- 라이센스 MIT - 사용 방법 1. jQuery 라이브러리와 loading-overlay.min.js 파일을 호출합니다. 2. 로딩 텍스트와 스피너가 포함된 로딩 오버레이를 적용할 대상 요소를 만듭니다. 3. 로딩 오버레이용 CSS를 적용합니다. 샘플 CSS 코드는 사이트를 참고하세요. 4. 로딩 오버레이를 추가하거나 제거하는 트리거를 만듭니다. 5. loadingOverlay 함수를 호출합니다. 6. 옵션을 설정할 수 있습니다. - 작동 화면 (샘플 CSS 적용)
Splitting.js를 사용하여 로딩하는 애니메이션 입니다. 코드 및 데모는 데모링크를 통해서 확인하실 수 있습니다. HTML 소스 Loading .... CSS 소스 .vertical-flip { width: 10rem; height: 1rem; margin-block-start: 0.5rem; background: dodgerblue; } .wrap { outline: 1px solid #efefef; outline-offset: 0.25rem; } p { opacity: 0.5; } body { display: grid; place-items: center; min-height: 100vh; background: #080808; font-family: "Open Sans", sans-serif; ..
데모사이트로 가시면 HTML 및 CSS소스가 공개가되어 있습니다. 긁어서 사용하시면 위와같은 효과를 바로 확인하실 수 있습니다. 설명에서도 사용방법이 나와있으며 링크2번을 클릭하시면 더 자세한 설명과 다른 형태의 로딩바로 확인하실 수 있습니다.~~
css3으로 구현된 에니메이션 로딩 아이콘 입니다. css를 변경하면 쉽게 커스텀도 가능합니다. 다양한 에니메이션 css 소스를 확인하고 수정이 가능합니다. 해당 사이트 또는 첨부파일을 다운로드해서 소스를 확인해 보실수 있습니다.
bar 회전형 디자인의 html 과 CSS로 이루어진 preloader 페이지 로딩 스타일 6개의 세로 바가 순차적으로 회원하면서 로딩 중임을 알려주는 스타일입니다. 자바스크립트 없이 순수하게 html 과 CSS로 이루어져 있으며, 색상, 높이, 너비 등을 CSS 편집을 통해서 수정 가능하며, 단순하지만 효용성이 좋은 자료입니다. 세로 막대 개수 추가는 물론, 회원 속도도 설정이 가능합니다.
세로바 디자인의 html 과 CSS로 이루어진 preloader 페이지 로딩 스타일 5개의 세로 바가 순차적으로 움직이면서 로딩 중임을 알려주는 스타일입니다. 자바스크립트 없이 순수하게 html 과 CSS로 이루어져 있으며, 색상, 높이, 너비 등을 CSS 편집을 통해서 수정 가능합니다. 세로 막대 개수 추가도 자유롭게 가능합니다.