Как добавить в код код анимации спиннера и прекратить загрузку страницы после завершения
Я пытаюсь добавить Spinner в код ниже. Я пробовал много способов, но не добился успеха. Я включил разные позиции кода счетчика, но иногда он запускается, но не останавливается. Или какое-то время никогда не бегать. Можете ли вы помочь мне добавить счетчик и остановить загрузку страницы после завершения?
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8" />
<meta http-equiv = "X-UA-Compatible" content = "IE=edge" />
<meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name = "description" content = "" />
<meta name = "author" content = "" />
<title>Dashboard - SB Admin</title>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/style.min.css" rel = "stylesheet" />
<link href = "css/styles.css" rel = "stylesheet" />
<script src = "https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin = "anonymous"></script>
<script>
(function ($) {
"use strict";
// Spinner
var spinner = function () {
setTimeout(function () {
if ($('#spinner').length > 0) {
$('#spinner').removeClass('show');
}
}, 1);
};
spinner();
</script>
</head>
<body class = "sb-nav-fixed">
<!-- Spinner Start -->
<div id = "spinner" class = "show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
<div class = "spinner-border text-primary" style = "width: 3rem; height: 3rem;" role = "status">
<span class = "sr-only">Loading...</span>
</div>
</div>
<!-- Spinner End -->
<nav class = "sb-topnav navbar navbar-expand navbar-dark bg-dark">
<!-- Navbar Brand-->
<a class = "navbar-brand ps-3" href = "index.html">Start Bootstrap</a>
<!-- Sidebar Toggle-->
<button class = "btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0" id = "sidebarToggle" href = "#!"><i class = "fas fa-bars"></i></button>
<!-- Navbar Search-->
<form class = "d-none d-md-inline-block form-inline ms-auto me-0 me-md-3 my-2 my-md-0">
<div class = "input-group">
<input class = "form-control" type = "text" placeholder = "Search for..." aria-label = "Search for..." aria-describedby = "btnNavbarSearch" />
<button class = "btn btn-primary" id = "btnNavbarSearch" type = "button"><i class = "fas fa-search"></i></button>
</div>
</form>
<!-- Navbar-->
<ul class = "navbar-nav ms-auto ms-md-0 me-3 me-lg-4">
<li class = "nav-item dropdown">
<a class = "nav-link dropdown-toggle" id = "navbarDropdown" href = "#" role = "button" data-bs-toggle = "dropdown" aria-expanded = "false"><i class = "fas fa-user fa-fw"></i></a>
<ul class = "dropdown-menu dropdown-menu-end" aria-labelledby = "navbarDropdown">
<li><a class = "dropdown-item" href = "#!">Settings</a></li>
<li><a class = "dropdown-item" href = "#!">Activity Log</a></li>
<li><hr class = "dropdown-divider" /></li>
<li><a class = "dropdown-item" href = "#!">Logout</a></li>
</ul>
</li>
</ul>
</nav>
<div id = "layoutSidenav">
<div id = "layoutSidenav_nav">
<nav class = "sb-sidenav accordion sb-sidenav-dark" id = "sidenavAccordion">
<div class = "sb-sidenav-menu">
<div class = "nav">
<div class = "sb-sidenav-menu-heading">Core</div>
<a class = "nav-link" href = "index.html">
<div class = "sb-nav-link-icon"><i class = "fas fa-tachometer-alt"></i></div>
Dashboard
</a>
<div class = "sb-sidenav-menu-heading">Interface</div>
<a class = "nav-link collapsed" href = "#" data-bs-toggle = "collapse" data-bs-target = "#collapseLayouts" aria-expanded = "false" aria-controls = "collapseLayouts">
<div class = "sb-nav-link-icon"><i class = "fas fa-columns"></i></div>
Layouts
<div class = "sb-sidenav-collapse-arrow"><i class = "fas fa-angle-down"></i></div>
</a>
<div class = "collapse" id = "collapseLayouts" aria-labelledby = "headingOne" data-bs-parent = "#sidenavAccordion">
<nav class = "sb-sidenav-menu-nested nav">
<a class = "nav-link" href = "layout-static.html">Static Navigation</a>
<a class = "nav-link" href = "layout-sidenav-light.html">Light Sidenav</a>
</nav>
</div>
<a class = "nav-link collapsed" href = "#" data-bs-toggle = "collapse" data-bs-target = "#collapsePages" aria-expanded = "false" aria-controls = "collapsePages">
<div class = "sb-nav-link-icon"><i class = "fas fa-book-open"></i></div>
Pages
<div class = "sb-sidenav-collapse-arrow"><i class = "fas fa-angle-down"></i></div>
</a>
<div class = "collapse" id = "collapsePages" aria-labelledby = "headingTwo" data-bs-parent = "#sidenavAccordion">
<nav class = "sb-sidenav-menu-nested nav accordion" id = "sidenavAccordionPages">
<a class = "nav-link collapsed" href = "#" data-bs-toggle = "collapse" data-bs-target = "#pagesCollapseAuth" aria-expanded = "false" aria-controls = "pagesCollapseAuth">
Authentication
<div class = "sb-sidenav-collapse-arrow"><i class = "fas fa-angle-down"></i></div>
</a>
<div class = "collapse" id = "pagesCollapseAuth" aria-labelledby = "headingOne" data-bs-parent = "#sidenavAccordionPages">
<nav class = "sb-sidenav-menu-nested nav">
<a class = "nav-link" href = "login.html">Login</a>
<a class = "nav-link" href = "register.html">Register</a>
<a class = "nav-link" href = "password.html">Forgot Password</a>
</nav>
</div>
<a class = "nav-link collapsed" href = "#" data-bs-toggle = "collapse" data-bs-target = "#pagesCollapseError" aria-expanded = "false" aria-controls = "pagesCollapseError">
Error
<div class = "sb-sidenav-collapse-arrow"><i class = "fas fa-angle-down"></i></div>
</a>
<div class = "collapse" id = "pagesCollapseError" aria-labelledby = "headingOne" data-bs-parent = "#sidenavAccordionPages">
<nav class = "sb-sidenav-menu-nested nav">
<a class = "nav-link" href = "401.html">401 Page</a>
<a class = "nav-link" href = "404.html">404 Page</a>
<a class = "nav-link" href = "500.html">500 Page</a>
</nav>
</div>
</nav>
</div>
<div class = "sb-sidenav-menu-heading">Addons</div>
<a class = "nav-link" href = "charts.html">
<div class = "sb-nav-link-icon"><i class = "fas fa-chart-area"></i></div>
Charts
</a>
<a class = "nav-link" href = "tables.html">
<div class = "sb-nav-link-icon"><i class = "fas fa-table"></i></div>
Tables
</a>
</div>
</div>
<div class = "sb-sidenav-footer">
<div class = "small">Logged in as:</div>
Start Bootstrap
</div>
</nav>
</div>
<div id = "layoutSidenav_content">
<main>
<div class = "container-fluid px-4">
<h1 class = "mt-4">Dashboard</h1>
<ol class = "breadcrumb mb-4">
<li class = "breadcrumb-item active">Dashboard</li>
</ol>
<div class = "row">
<div class = "col-xl-3 col-md-6">
<div class = "card bg-primary text-white mb-4">
<div class = "card-body">Primary Card</div>
<div class = "card-footer d-flex align-items-center justify-content-between">
<a class = "small text-white stretched-link" href = "#">View Details</a>
<div class = "small text-white"><i class = "fas fa-angle-right"></i></div>
</div>
</div>
</div>
<div class = "col-xl-3 col-md-6">
<div class = "card bg-warning text-white mb-4">
<div class = "card-body">Warning Card</div>
<div class = "card-footer d-flex align-items-center justify-content-between">
<a class = "small text-white stretched-link" href = "#">View Details</a>
<div class = "small text-white"><i class = "fas fa-angle-right"></i></div>
</div>
</div>
</div>
<div class = "col-xl-3 col-md-6">
<div class = "card bg-success text-white mb-4">
<div class = "card-body">Success Card</div>
<div class = "card-footer d-flex align-items-center justify-content-between">
<a class = "small text-white stretched-link" href = "#">View Details</a>
<div class = "small text-white"><i class = "fas fa-angle-right"></i></div>
</div>
</div>
</div>
<div class = "col-xl-3 col-md-6">
<div class = "card bg-danger text-white mb-4">
<div class = "card-body">Danger Card</div>
<div class = "card-footer d-flex align-items-center justify-content-between">
<a class = "small text-white stretched-link" href = "#">View Details</a>
<div class = "small text-white"><i class = "fas fa-angle-right"></i></div>
</div>
</div>
</div>
</div>
<div class = "row">
<div class = "col-xl-6">
<div class = "card mb-4">
<div class = "card-header">
<i class = "fas fa-chart-area me-1"></i>
Area Chart Example
</div>
<div class = "card-body"><canvas id = "myAreaChart" width = "100%" height = "40"></canvas></div>
</div>
</div>
<div class = "col-xl-6">
<div class = "card mb-4">
<div class = "card-header">
<i class = "fas fa-chart-bar me-1"></i>
Bar Chart Example
</div>
<div class = "card-body"><canvas id = "myBarChart" width = "100%" height = "40"></canvas></div>
</div>
</div>
</div>
<div class = "card mb-4">
<div class = "card-header">
<i class = "fas fa-table me-1"></i>
DataTable Example
</div>
<div class = "card-body">
<table id = "datatablesSimple">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
<footer class = "py-4 bg-light mt-auto">
<div class = "container-fluid px-4">
<div class = "d-flex align-items-center justify-content-between small">
<div class = "text-muted">Copyright © Your Website 2023</div>
<div>
<a href = "#">Privacy Policy</a>
·
<a href = "#">Terms & Conditions</a>
</div>
</div>
</div>
</footer>
</div>
</div>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin = "anonymous"></script>
<script src = "js/scripts.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin = "anonymous"></script>
<script src = "assets/demo/chart-area-demo.js"></script>
<script src = "assets/demo/chart-bar-demo.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/simple-datatables.min.js" crossorigin = "anonymous"></script>
<script src = "js/datatables-simple-demo.js"></script>
</body>
</html>
Я попробовал этот скрипт
<script>
(function ($) {
"use strict";
// Spinner
var spinner = function () {
setTimeout(function () {
if ($('#spinner').length > 0) {
$('#spinner').removeClass('show');
}
}, 1);
};
spinner();
</script>
и html-код
<!-- Spinner Start -->
<div id = "spinner" class = "show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
<div class = "spinner-border text-primary" style = "width: 3rem; height: 3rem;" role = "status">
<span class = "sr-only">Loading...</span>
</div>
</div>
<!-- Spinner End -->
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
0
56
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Ответ принят как подходящий
Трудно судить о вашей проблеме, не видя рассматриваемый CSS. Я подозреваю, что удаления show недостаточно, чтобы скрыть элемент, если только у вас нет другого класса, применяющего какой-либо класс hide. См. упрощенный пример:
// Spinner
var spinner = function () {
setTimeout(function () {
if ($('#spinner').length > 0) {
$('#spinner').removeClass('show').addClass('hide')
}
}, 2000);
}
spinner();.container {
background: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
}
.spinner {
position: absolute;
top: 50%;
left: 50%;
background: blue;
transform: translate(-50%, -50%);
padding: 1em;
color: white;
}
.show {
display: block;
}
.hide {
display: none;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class = "container">
<p>
Content
</p>
<div id = "spinner" class = "spinner show">
Loading...
</div>
</div>ты можешь сделать вот так
.spinner {
display:none;
...rest of your css
}
.spinner.show {
display:block;
//or
display: block !important;
}
Вы можете удалить класс show следующим образом
$('.spinner').removeClass('show');
И если вы хотите удалить показ при выполнении запроса, используйте свойство «then» axios или fetch.
someReqFunc().then(()=>{
$('.spinner').removeClass('show');
})
или используйте наконец
someReqFunc().finally(()=>{
$('.spinner').removeClass('show');
})
#В этой ситуации вы должны определить spinner как имя класса
Другие вопросы по теме
Как заставить Android Spinner работать правильно
Вставить счетчик в функцию javascript
Dyanmic изменяет размер счетчика загрузки CSS3 по пикселям
2 Datepickers как счетчики в Android
Изменить шрифт и размер счетчика
Ожидание Rshining не отображается должным образом при использовании его на рендерах разных tabPanel
Как добавить счетчик при загрузке данных в react.js?
Программное изменение содержимого Spinner Text
Как отобразить счетчик при загрузке данных с сервера с помощью fetch API в REACT JS?
Как добавить загрузку Spinner при первой загрузке сайта
Похожие вопросы
Пусть наложение div станет видимым через переход/анимацию круга клип-пути
Как добавить пунктирное подчеркивание для каждой строки в элементах многострочного списка
Прикрепленный заголовок таблицы перекрывается с панелью навигации
Правая граница гибкого элемента div не учитывается в окнах просмотра с узкой шириной
Верхний и нижний колонтитулы не занимают всю ширину
Как разместить изображения там, где я хочу?
Почему мои пользовательские шрифты больше не загружаются онлайн?
Как перерисовать компонент в +layout.svelte
Как создать несколько раскрывающихся кнопок
Цвет не меняется при смене темы