دانلود لودینگ های بسیار زیبا (CSS)
#1
Note 
[تصویر:  loaders_015556.jpg]

دانلود

پاسخ
#2
Note 
با سلام میخواستم ببینم از این لودینگ ها چطوری میشه استفاده کرد ؟
من تو فایل html ام قرار دادم لودینگها رو تو صفحه نشون میده اما من میخوام فقط تا وقتی که صفحه بالا نیومده نشون بده و بعدش از بین بره
چکار کنم؟؟؟

پاسخ
#3
Note 
سلام
برای اینکه متوجه بشید صفحه کاملا بارگذاری شده از این کد جاوا اسکریپت میتونید استفاده کنید:
[JS]window.onload = function () { document.getElementById('preloader').remove(); }[/JS]

نحوه کار به این صورته که شما افکت لودینگ رو به صفحه اضافه میکنید و بعد وقتی صفحه لود شد اون رو با جاوا اسکریپت (همون کد بالا) حذف میکنید.

[HTML]
<!DOCTYPE html>
<html>
<head>
<title>Title of document</title>
<meta charset="utf-8" />
</head>
<body>
<style>
.spinner {
margin: 100px auto;
width: 32px;
height: 32px;
position: relative;
}

.cube1, .cube2 {
background-color: #333;
width: 10px;
height: 10px;
position: absolute;
top: 0;
left: 0;

-webkit-animation: cubemove 1.8s infinite ease-in-out;
animation: cubemove 1.8s infinite ease-in-out;
}

.cube2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}

@-webkit-keyframes cubemove {
25% { -webkit-transform: translateX(22px) rotate(-90deg) scale(0.5) }
50% { -webkit-transform: translateX(22px) translateY(22px) rotate(-180deg) }
75% { -webkit-transform: translateX(0px) translateY(22px) rotate(-270deg) scale(0.5) }
100% { -webkit-transform: rotate(-360deg) }
}

@keyframes cubemove {
25% {
transform: translateX(42px) rotate(-90deg) scale(0.5);
-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
} 50% {
/* Hack to make FF rotate in the right direction */
transform: translateX(42px) translateY(42px) rotate(-179deg);
-webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
} 50.1% {
transform: translateX(42px) translateY(42px) rotate(-180deg);
-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
} 75% {
transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
} 100% {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
}
}
</style>
<div id="preloader" class="spinner">
<div class="cube1"></div>
<div class="cube2"></div>
</div>

<script>
window.onload = function () { document.getElementById('preloader').remove(); }
</script>
</body>
</html>
[/HTML]

پاسخ
#4
Note 
واقعا ممنون از راهنماییتون مشکلم حل شد :yeah:

پاسخ
ایجاد موضوع جدید   پاسخ به موضوع  

موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  سوال چطوری وقتی کاربر رسید به قسمتی از صفحه کد اجرا شه؟ naweednri 5 84 17-05-2017 ساعت 09:24
آخرین ارسال: C0der
  سوال مشکل نمایش در منو زیر مجموعه سطح چهارم blackwizard 0 185 30-06-2016 ساعت 19:27
آخرین ارسال: blackwizard
Note 7 افکت بسیار زیبای CSS THE KNIGHT 2 892 26-09-2014 ساعت 16:09
آخرین ارسال: saber2
Note افکت زیبا برای ساخت دکمه در css WWWorker 0 422 20-09-2014 ساعت 21:12
آخرین ارسال: WWWorker
Note دکمه دانلود زیبا با CSS3 Daniel 2 809 14-03-2014 ساعت 23:40
آخرین ارسال: PHP.sec
Note Tooltip زیبا با CSS Daniel 1 544 09-01-2014 ساعت 11:56
آخرین ارسال: AnimeIraN
Note CSS: کلید زیبای روشن و خاموش SOFTAFZAR 3 821 05-08-2013 ساعت 13:52
آخرین ارسال: SOFTAFZAR
Note افکت های زیبای CSS SOFTAFZAR 0 761 11-01-2013 ساعت 19:11
آخرین ارسال: SOFTAFZAR

کاربرانِ درحال بازدید از این موضوع:   1 مهمان