پیش به سوی تابستان؛ با تخفیفهای داغ راکت!
بزن بریم!سلام دوستان خواستم نحوه قرار گیری اسپینرهای bootstrap رو برای صحفه لودینگ سایت بدونم. ممنون میشم راهنمایی کنید
براتون در بوت استرپ کدنویسی کردم:
<!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 باشه ، بعد از آمدن جوابش ، برعکس عملیات بالا رو انجام میدی .
براتون در بوت استرپ کدنویسی کردم:
<!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>
این یکی ی کوچولو بهتر از قبلی هستش:
<!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>
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟