دانلود لودینگ های بسیار زیبا (CSS)

CSS

توسط wwworker در 4 سال پیش
0 1.3k 3 4 سال پیش
a-z-nwwworkerreza-irdev
0

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

0

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

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

<!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>
0

واقعا ممنون از راهنماییتون مشکلم حل شد :yeah:

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.

لطفا ابتدا لاگین کنید