괜찮은 투명한 아약스 스피너를 어디서 찾을 수 있습니까?
저는 어떤 배경에서도 잘 어울리는 괜찮은 투명한 아약스 스피너를 찾고 있습니다.ajaxload.info 등 다양한 발전기 사이트를 가봤지만 어두운 배경에 잘 어울리는 사이트는 하나도 없습니다.투명 스피너를 어디서 구할 수 있는지 아는 사람?
최근 알파 채널 투명성을 지원하는 PNG 스프라이트로 전환했습니다.
(http://preloaders.net/ 을 사용하여 생성됨)
배경 이미지의 오프셋을 변경하는 작은 자바스크립트 루프가 필요하지만, 저는 특히 (POST) 양식을 서버에 제출할 때 매우 유용하다는 것을 알게 되었습니다(이 경우 일반 GIF의 애니메이션이 종종 중지됨).또한 기존 브라우저는 사용자 지정 요소를 회전하거나 그리는 것보다 더 잘 지원합니다.
var counter = 0;
setInterval(function() {
var frames=12; var frameWidth = 15;
var offset=counter * -frameWidth;
document.getElementById("spinner").style.backgroundPosition=offset + "px 0px";
counter++; if (counter>=frames) counter =0;
}, 100);
예: http://jsfiddle.net/Ekus/dhRxG/
보기 좋게 하려면 알파 투명도(즉, 픽셀 단위의 부분 투명도)가 필요하기 때문에 GIF 형식(브라우저에서 지원되는 유일한 일반 애니메이션 이미지 형식)은 이진 투명도(각 픽셀은 100% 불투명하거나 투명함)만 지원합니다.
제가 GIF에 대해 생각해 낸 유일한 해결책은 배경색을 기반으로 즉시 로더를 생성하는 것입니다. 단색이 아닌 색에서는 작동하지 않습니다.
가장 좋은 해결책은 알파 투명도가 필요 없는 애니메이션을 사용하거나(Facebook의 세 블록이 이에 대한 좋은 예입니다) 새로운 CSS3/Javascript/Canvas 기반 스피너 중 하나를 사용하는 것입니다. 왜냐하면 이들은 실제로 단일 프레임을 이동(즉, 회전)함으로써 애니메이션을 생성하므로 알파 투명도를 가진 PNG가 될 수 있습니다.
http://spiffygif.com 을 사용해 보십시오.
문서에 설명된 후광 기능은 이 문제에 대한 해결책을 제공합니다.
한편, CSS 애니메이션 지원이 점점 더 이용 가능해지고 있기 때문에, 여기 10개의 CSS 전용 로딩 지표가 인상적입니다: http://tobiasahlin.com/spinkit/ . http://tobiasahlin.com/spinkit/
글꼴을 사용합니다.
CSS를 사용하여 글꼴의 단일 문자를 회전시키는 코드는 다음과 같습니다.
<i class="icon-spin3 animate-spin"></i>
"아이콘" 글꼴을 보려면 Fontello를 확인하십시오.예를 들어, "Fontelico" 글꼴로 제공되는 좋은 "회전 가능한" 문자는 다음과 같습니다.
글꼴을 사용하면 크기, 색상 및 투명도를 매우 쉽게 설정할 수 있습니다(단, CSS).벡터 그래픽으로 렌더링되므로 크기에 상관없이 항상 깨끗한 가장자리를 얻을 수 있습니다.좋습니다.
ps - 폰텔로의 한 가지 좋은 점은 당신이 원하는 문자를 직접 선택할 수 있게 해주고, 그리고 당신이 필요로 하는 글꼴 파일과 CSS가 있는 zip 파일을 다운로드 할 수 있게 해준다는 것입니다.animate-spin 클래스를 사용하려면 animation.css 파일을 포함하거나 사용해야 합니다.
언급URL : https://stackoverflow.com/questions/7411029/where-can-i-find-a-decent-transparent-ajax-spinner
'programing' 카테고리의 다른 글
| MySQL Ubuntu 14.04 LTS 완전히 제거 (0) | 2023.08.30 |
|---|---|
| Node.js 17.0.1 Gatsby 오류 - "디지털 봉투 루틴:: 지원되지 않음...ERR_OSSL_EVP_지원되지 않음" (0) | 2023.08.30 |
| 요구 사항을 가져오는 방법.Poetry를 사용하는 기존 프로젝트의 txt (0) | 2023.08.30 |
| CSS 그리드의 동일한 너비 열 (0) | 2023.08.30 |
| __read_macro, __init, __macro에 대한 좋은 설명 (0) | 2023.08.30 |