روش استفاده از اسپینر های صحفه لودینگ bootstrap
سلام دوستان خواستم نحوه قرار گیری اسپینرهای bootstrap رو برای صحفه لودینگ سایت بدونم. ممنون میشم راهنمایی کنید
پاسخ‌ها
9
براتون در بوت استرپ کدنویسی کردم:
<!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>اینجا مثال های فراوانی داره:
https://www.w3schools.com/bootstrap4/bootstrap_spinners.asp
همچنین اینجا:
https://getbootstrap.com/docs/4.4/components/spinners/
سلام کاری که من کردم این بود ،
لودینگ رو داخل یه دایو گذاشتم و کل محتوا رو هم داخل یه دایو.
و دایو لودینگ همیشه مخفی هست .
بعد از کلیک کاربر و درخواست دادن ، دایو لودینگ رو نمایش میدم و دایو محتوا رو مخفی میکنم.
حالا اگر درخواست Ajax باشه ، بعد از آمدن جوابش ، برعکس عملیات بالا رو انجام میدی .
گفتگوهای مرتبط
شاید پاسخ شما همین‌جا باشد
من می خوام بدونم چطوری باید این تگ های اسپینر رو اجرایی کنم از سند html تا index. Js
مثال هارو دیدید یا خیر؟
بله دیدم .ولی در خصوص راه اندازی اش خواستم راهنمایی ام کنید
تشکر از وقتی که گذاشتین🙏
سرزنده باشید 🍀
این یکی ی کوچولو بهتر از قبلی هستش:
<!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>