دیتالایف انجین فارسی

تغییر استایل شاخص بارگذاری

تاریخ انتشار: 19 اسفند 1392
ارسال کننده: majid_jeijo
به وسیله این هک ساده شاخص بارگذاری صفحات ای جکس (لطفا چند لحظه منتظر بمانید..!) را به صورت لودینگ گوگل تبدیل کنید و لذت ببرید :)
  • آموزش نصب
  • تصاویر
فایل engine.css و یا style.css قالب خود را باز کنید.
کد زیر را پیدا کنید :
#loading-layer

کد بالا و کل محتوای آنرا در بین } تا { را پاک کنید و کد زیر به جای آن قرار دهید:
/* ==================== AJAX LOADING - KOOKDESIGN.IR */ @-webkit-keyframes loading-layer-top { 2.5% { background: #ff8866; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 13.75% { background: #ff430d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 13.76% { background: #ffae0d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 25% { background: #ffcc66; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } 27.5% { background: #ffcc66; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 41.25% { background: #ffae0d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 41.26% { background: #2cc642; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { background: #66dd77; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 52.5% { background: #66dd77; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 63.75% { background: #2cc642; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 63.76% { background: #1386d2; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 75% { background: #44aaee; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } 77.5% { background: #44aaee; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 91.25% { background: #1386d2; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 91.26% { background: #ff430d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { background: #ff8866; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } } @-moz-keyframes loading-layer-top { 2.5% { background: #ff8866; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 13.75% { background: #ff430d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 13.76% { background: #ffae0d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 25% { background: #ffcc66; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } 27.5% { background: #ffcc66; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 41.25% { background: #ffae0d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 41.26% { background: #2cc642; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { background: #66dd77; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 52.5% { background: #66dd77; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 63.75% { background: #2cc642; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 63.76% { background: #1386d2; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 75% { background: #44aaee; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } 77.5% { background: #44aaee; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 91.25% { background: #1386d2; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 91.26% { background: #ff430d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { background: #ff8866; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } } /* ==================== AJAX LOADING - KOOKDESIGN.IR */ @-o-keyframes loading-layer-top { 2.5% { background: #ff8866; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 13.75% { background: #ff430d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 13.76% { background: #ffae0d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 25% { background: #ffcc66; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } 27.5% { background: #ffcc66; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 41.25% { background: #ffae0d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 41.26% { background: #2cc642; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { background: #66dd77; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 52.5% { background: #66dd77; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 63.75% { background: #2cc642; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 63.76% { background: #1386d2; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 75% { background: #44aaee; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } 77.5% { background: #44aaee; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 91.25% { background: #1386d2; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 91.26% { background: #ff430d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { background: #ff8866; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } } @keyframes loading-layer-top { 2.5% { background: #ff8866; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 13.75% { background: #ff430d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 13.76% { background: #ffae0d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 25% { background: #ffcc66; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } 27.5% { background: #ffcc66; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 41.25% { background: #ffae0d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 41.26% { background: #2cc642; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { background: #66dd77; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 52.5% { background: #66dd77; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 63.75% { background: #2cc642; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 63.76% { background: #1386d2; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 75% { background: #44aaee; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } 77.5% { background: #44aaee; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 91.25% { background: #1386d2; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 91.26% { background: #ff430d; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -ms-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { background: #ff8866; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } } @-webkit-keyframes loading-layer-bottom { 0% { background: #ffcc66; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 50% { background: #ffcc66; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 75% { background: #44aaee; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 100% { background: #44aaee; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } } @-moz-keyframes loading-layer-bottom { 0% { background: #ffcc66; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 50% { background: #ffcc66; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 75% { background: #44aaee; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 100% { background: #44aaee; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } } @-o-keyframes loading-layer-bottom { 0% { background: #ffcc66; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 50% { background: #ffcc66; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 75% { background: #44aaee; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 100% { background: #44aaee; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } } @keyframes loading-layer-bottom { 0% { background: #ffcc66; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 50% { background: #ffcc66; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 75% { background: #44aaee; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 100% { background: #44aaee; -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } } @-webkit-keyframes loading-layer-background { 0% { background: #ff8866; -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); transform: rotateZ(180deg); } 25% { background: #ff8866; -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); transform: rotateZ(180deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 27.5% { background: #66dd77; -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg); } 50% { background: #66dd77; -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 52.5% { background: #66dd77; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } 75% { background: #66dd77; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 77.5% { background: #ff8866; -webkit-transform: rotateZ(270deg); -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); transform: rotateZ(270deg); } 100% { background: #ff8866; -webkit-transform: rotateZ(270deg); -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); transform: rotateZ(270deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } } @-moz-keyframes loading-layer-background { 0% { background: #ff8866; -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); transform: rotateZ(180deg); } 25% { background: #ff8866; -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); transform: rotateZ(180deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 27.5% { background: #66dd77; -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg); } 50% { background: #66dd77; -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 52.5% { background: #66dd77; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } 75% { background: #66dd77; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 77.5% { background: #ff8866; -webkit-transform: rotateZ(270deg); -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); transform: rotateZ(270deg); } 100% { background: #ff8866; -webkit-transform: rotateZ(270deg); -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); transform: rotateZ(270deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } } @-o-keyframes loading-layer-background { 0% { background: #ff8866; -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); transform: rotateZ(180deg); } 25% { background: #ff8866; -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); transform: rotateZ(180deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 27.5% { background: #66dd77; -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg); } 50% { background: #66dd77; -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 52.5% { background: #66dd77; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } 75% { background: #66dd77; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 77.5% { background: #ff8866; -webkit-transform: rotateZ(270deg); -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); transform: rotateZ(270deg); } 100% { background: #ff8866; -webkit-transform: rotateZ(270deg); -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); transform: rotateZ(270deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } } @keyframes loading-layer-background { 0% { background: #ff8866; -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); transform: rotateZ(180deg); } 25% { background: #ff8866; -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); transform: rotateZ(180deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 27.5% { background: #66dd77; -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg); } 50% { background: #66dd77; -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 52.5% { background: #66dd77; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); } 75% { background: #66dd77; -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } 77.5% { background: #ff8866; -webkit-transform: rotateZ(270deg); -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); transform: rotateZ(270deg); } 100% { background: #ff8866; -webkit-transform: rotateZ(270deg); -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); transform: rotateZ(270deg); -webkit-animation-timing-function: step-start; -moz-animation-timing-function: step-start; -ms-animation-timing-function: step-start; -o-animation-timing-function: step-start; animation-timing-function: step-start; } } /* Styles for old versions of IE */ #loading-layer { font-family: sans-serif; font-weight: 100; } /* :not(:required) hides this rule from IE9 and below */ #loading-layer:not(:required) { overflow: hidden; position: relative; text-indent: -9999px; display: inline-block; width: 48px; height: 48px; background: #ff8866; -webkit-border-radius: 24px; -moz-border-radius: 24px; -ms-border-radius: 24px; -o-border-radius: 24px; border-radius: 24px; -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg); -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: loading-layer-background 3s infinite ease-in-out; -moz-animation: loading-layer-background 3s infinite ease-in-out; -ms-animation: loading-layer-background 3s infinite ease-in-out; -o-animation: loading-layer-background 3s infinite ease-in-out; animation: loading-layer-background 3s infinite ease-in-out; } #loading-layer:not(:required)::after { background: #ff8866; -webkit-border-radius: 24px 0 0 24px; -moz-border-radius: 24px 0 0 24px; -ms-border-radius: 24px 0 0 24px; -o-border-radius: 24px 0 0 24px; border-radius: 24px 0 0 24px; content: ''; position: absolute; right: 50%; top: 0; width: 50%; height: 100%; -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: loading-layer-top 3s infinite linear; -moz-animation: loading-layer-top 3s infinite linear; -ms-animation: loading-layer-top 3s infinite linear; -o-animation: loading-layer-top 3s infinite linear; animation: loading-layer-top 3s infinite linear; } #loading-layer:not(:required)::before { background: #ffcc66; -webkit-border-radius: 24px 0 0 24px; -moz-border-radius: 24px 0 0 24px; -ms-border-radius: 24px 0 0 24px; -o-border-radius: 24px 0 0 24px; border-radius: 24px 0 0 24px; content: ''; position: absolute; right: 50%; top: 0; width: 50%; height: 100%; -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: loading-layer-bottom 3s infinite linear; -moz-animation: loading-layer-bottom 3s infinite linear; -ms-animation: loading-layer-bottom 3s infinite linear; -o-animation: loading-layer-bottom 3s infinite linear; animation: loading-layer-bottom 3s infinite linear; } /* ======= END - ============= AJAX LOADING - KOOKDESIGN.IR */

پایان
از اکنون به بعد توابع استاندارد AJAX (اضافه کردن / حذف نظرات، نظر سنجی، تقویم، و غیره) با شیوه جدید لود می شوند.
موفق و پیروز باشید
تغییر استایل شاخص بارگذاری
13 نفر (13 کاربر و 0 میهمان) از این مطلب تشکر کرده اند.
تشکر
مدیر سایت
20 اسفند 1392 - 23:51
خسته نباشی مجید جان
کار جالبیه love

--------------------
عضو سایت
02 فروردین 1393 - 01:29
تشکردوست عزیز flower
امکانش هست یه نفر یه دمو از صفحه ای که نمونشو داره بزاره
قبلا لودینگشو دیدم ولی یادم نیست question
مدیر بخش قالب ها
02 فروردین 1393 - 04:46
نقل قول: mohsenazadi
تشکردوست عزیز flower
امکانش هست یه نفر یه دمو از صفحه ای که نمونشو داره بزاره
قبلا لودینگشو دیدم ولی یادم نیست question

خواهش
تست گرفتنش فکر نمیکنم زیاد زمان ببره fellow
موفق باشید

--------------------
عضو سایت
02 فروردین 1393 - 17:05
بارگذاری صفحات ای جکس نصب نکردم fellow
واسه نظرسنجی و جاهای دیگه تست کردم چون زود لود میشه چیزی مشخص نیست
بهرحال ممنون flower
جهت ارسال نظر، فرم زیر را تکمیل نمائید:
نام:*
ایمیل:*
متن نظر:

 
پررنگکج خط دارخط دار در وسط|سمت چپوسط سمت راست|قرار دادن شکلکانتخاب رنگ|پنهان کردن متنقراردادن نقل قولتبدیل نوشته ها به زبان روسیقراردادن Spoiler
کد امنیتی: *