Zenn
☕

bootstrap 5 Spinners, Loading(ローディング部品)

2023/08/05に公開
Bootstrap
CSS
tech

概要

bootstrap 5 Spinners,　ローディング部品 使う例になります。

  • micromodalと組み合わせて、設置スペースが無い場合でも、表示できるような形にしました
  • 通信完了時等の、タイミングでモーダルを閉じる想定です

環境

  • bootstrap 5.3

参考

参考のレイアウト

Spinners2.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width">
		<meta name="generator" content="Astro v2.6.4">
		<title>Welcome to Astro.</title>
        <!-- -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
        <!-- -->
        <!-- micromodal -->
        <script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>         
        <link href="./micromodal.css" rel="stylesheet"> 
  </head>
<body>
    <div class="container">
        <h3>Spinners2.html</h3>
        <hr />	
        <div class="modal micromodal-slide" id="modal-1" aria-hidden="true">
            <div class="modal__overlay" tabindex="-1" data-micromodal-close>
                <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
                <header class="modal__header">
                    <h2 class="modal__title" id="modal-1-title">
                    </h2>
                    <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
                </header>
                <main class="modal__content my-1" id="modal-1-content">
                    <!-- <h3>Text align </h3> -->
                    <div class="text-center mb-3">
                        <div class="spinner-border"  role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>                        
                    </div>                    
                </main>
                <footer class="modal__footer text-end">
                </footer>
                </div>
            </div>
        </div>
        <button onClick="openModal();">Test1</button>
    </div>
<style>
.text_input_w180 { width: 180px;}     
.text_input_w120 { width: 120px;}
.spinner-border {width: 3rem; height: 3rem;}     
#modal-1 .modal__container {
    min-width: 400px;
}
</style>
<!-- script -->
<script>
MicroModal.init({
  disableScroll: true,
  awaitOpenAnimation: true,
  awaitCloseAnimation: true
});
function closeModal() {
    MicroModal.close('modal-1');
}
//
function openModal() {
  MicroModal.show('modal-1'); // [1]
}
</script>
</body>
</html>

Discussion