ورود عضویت

جواد غلامی

4 سال پیش توسط جواد غلامی مطرح شد

9 پاسخ

روش استفاده از اسپینر های صحفه لودینگ bootstrap

سلام دوستان خواستم نحوه قرار گیری اسپینرهای bootstrap رو برای صحفه لودینگ سایت بدونم. ممنون میشم راهنمایی کنید

ثبت پرسش جدید

میلاد-م

تخصص : توسعه‌دهنده رابط کاربری - Fron...

@milad 4 سال پیش مطرح شد

براتون در بوت استرپ کدنویسی کردم:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>loading bootstrap</title>
  </head>
  <body>
    <div id="preloader" class="position-absolute h-100 w-100 bg-primary">
        <div class="h-100 w-100 d-flex justify-content-center align-items-center bg-primary">
            <div class="spinner-border" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
    </div>
    <h1>Content your site</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script>
        window.onload = function(){ document.getElementById("preloader").style.display = "none"; }
    </script>
  </body>
</html>

ارسال پاسخ

میلاد-م

تخصص : توسعه‌دهنده رابط کاربری - Fron...

@milad 4 سال پیش آپدیت شد

اینجا مثال های فراوانی داره:
https://www.w3schools.com/bootstrap4/bootstrap_spinners.asp
همچنین اینجا:
https://getbootstrap.com/docs/4.4/components/spinners/

ارسال پاسخ

سعید

تخصص : برنامه نویس وب

@Saeeed 4 سال پیش مطرح شد

سلام کاری که من کردم این بود ،
لودینگ رو داخل یه دایو گذاشتم و کل محتوا رو هم داخل یه دایو.
و دایو لودینگ همیشه مخفی هست .
بعد از کلیک کاربر و درخواست دادن ، دایو لودینگ رو نمایش میدم و دایو محتوا رو مخفی میکنم.
حالا اگر درخواست Ajax باشه ، بعد از آمدن جوابش ، برعکس عملیات بالا رو انجام میدی .

ارسال پاسخ

جواد غلامی

تخصص : طراح و توسعه دهنده وب

@gholamuuuu 4 سال پیش مطرح شد

من می خوام بدونم چطوری باید این تگ های اسپینر رو اجرایی کنم از سند html تا index. Js

ارسال پاسخ

میلاد-م

تخصص : توسعه‌دهنده رابط کاربری - Fron...

@milad 4 سال پیش مطرح شد

مثال هارو دیدید یا خیر؟

ارسال پاسخ

جواد غلامی

تخصص : طراح و توسعه دهنده وب

@gholamuuuu 4 سال پیش مطرح شد

بله دیدم .ولی در خصوص راه اندازی اش خواستم راهنمایی ام کنید

ارسال پاسخ

میلاد-م

تخصص : توسعه‌دهنده رابط کاربری - Fron...

@milad 4 سال پیش مطرح شد

براتون در بوت استرپ کدنویسی کردم:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>loading bootstrap</title>
  </head>
  <body>
    <div id="preloader" class="position-absolute h-100 w-100 bg-primary">
        <div class="h-100 w-100 d-flex justify-content-center align-items-center bg-primary">
            <div class="spinner-border" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
    </div>
    <h1>Content your site</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script>
        window.onload = function(){ document.getElementById("preloader").style.display = "none"; }
    </script>
  </body>
</html>

ارسال پاسخ

جواد غلامی

تخصص : طراح و توسعه دهنده وب

@gholamuuuu 4 سال پیش مطرح شد

تشکر از وقتی که گذاشتین🙏

ارسال پاسخ

میلاد-م

تخصص : توسعه‌دهنده رابط کاربری - Fron...

@milad 4 سال پیش مطرح شد

سرزنده باشید 🍀

ارسال پاسخ

میلاد-م

تخصص : توسعه‌دهنده رابط کاربری - Fron...

@milad 4 سال پیش مطرح شد

این یکی ی کوچولو بهتر از قبلی هستش:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>loading bootstrap</title>
  </head>
  <body>
    <div id="preloader" class="position-absolute h-100 w-100 bg-primary">
        <div class="h-100 w-100 d-flex justify-content-center align-items-center bg-primary">
            <div class="spinner-border" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
    </div>
    <h1>Content your site</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <script>
        $(window).on("load", function(){
            $('#preloader').hide(3000);
        });

        //window.onload = function(){ document.getElementById("preloader").style.display = "none"; }
    </script>
  </body>
</html>

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

محبوب‌ترین آموزش‌ها

روش استفاده از اسپینر های صحفه لودینگ bootstrap

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید