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

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

پشتیبان رسمی سیستم مدیریت محتوا

تغییر استایل شاخص

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

به وسیله این هک ساده شاخص بارگذاری صفحات ای جکس (لطفا چند لحظه منتظر بمانید..!) را به صورت لودینگ گوگل تبدیل کنید و لذت ببرید :)

آموزش نصب
فایل 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 (اضافه کردن / حذف نظرات، نظر سنجی، تقویم، و غیره) با شیوه جدید لود می شوند.
موفق و پیروز باشید
تصاویر
تغییر استایل شاخص بارگذاری
نظرات کاربران
حمید صادقی در 20 اسفند 1392 - 23:51 گفته:
مدیر سایتنظرات: 465

خسته نباشی مجید جان
کار جالبیه love

--------------------

محسن آزادی در 02 فروردین 1393 - 01:29 گفته:
عضو سایتنظرات: 9

تشکردوست عزیز flower
امکانش هست یه نفر یه دمو از صفحه ای که نمونشو داره بزاره
قبلا لودینگشو دیدم ولی یادم نیست question

مجید بشیری در 02 فروردین 1393 - 04:46 گفته:
مدیر بخش قالب هانظرات: 176

نقل قول: mohsenazadi
تشکردوست عزیز flower
امکانش هست یه نفر یه دمو از صفحه ای که نمونشو داره بزاره
قبلا لودینگشو دیدم ولی یادم نیست question

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

--------------------

محسن آزادی در 02 فروردین 1393 - 17:05 گفته:
عضو سایتنظرات: 9

بارگذاری صفحات ای جکس نصب نکردم fellow
واسه نظرسنجی و جاهای دیگه تست کردم چون زود لود میشه چیزی مشخص نیست
بهرحال ممنون flower

ارسال نظر
نام:*
ایمیل:*
متن نظر:
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
کد را وارد کنید: *
عکس خوانده نمی‌شود؟ کلیک کنید!