.spinner-fs-wrapper { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1101; /* increase z-index by 1 to ensure it's on top of spinner-fs-background */ } .spinner-wrapper .spinner-border { width: 4rem; height: 4rem; color: #00a2e2; } .spinner-fs-background { background-color: rgba(2, 2, 2, 0.5); color: rgb(230, 230, 230); width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; /* * Set to high value to me sure that it always overlaps all components * https://getbootstrap.com/docs/4.3/layout/overview/#z-index */ z-index: 1100; } .spinner-fs-wrapper .spinner-border { width: 6rem; height: 6rem; } .spinner-fs-wrapper .spinner-text { margin: 1rem; } .spinner-border-sm { min-width: 16px; }