I have a problem with my text and "loader". I want them to be in the MIDDLE but they are centred in the top.
.loader {
margin: auto;
border: 16px solid #f3f3f3;
/* Light grey */
border-top: 16px solid #3498db;
/* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.WebEntTxt {
color: white;
line-height: 1.5;
text-align: center;
text-decoration: none;
}
<div class="loader"></div>
<h1 class="WebEntTxt">You are entering PUBGpot! Please wait!</h1>
How can I get them to be in the CENTER of the screen, NOT in the TOP?
Since you want both text and spinner in middle, add a wrapper around both of them. Then,
Just add position fixed to wrapper, if you want it to position in center of the entire window. Then bring it to the center by adding left 50% and top 50%. Then you have to offset half of its original width and height using translate transform.
#wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.loader {
margin: auto;
border: 16px solid #f3f3f3;
/* Light grey */
border-top: 16px solid #3498db;
/* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.WebEntTxt {
color: red;
line-height: 1.5;
text-align: center;
text-decoration: none;
}
<body class="Background" background="Background.jpg">
<div id="wrapper">
<div class="loader"></div>
<h1 class="WebEntTxt">You are entering PUBGpot! Please wait!</h1>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
Using Flexbox here, this is best way to align element.
<!DOCTYPE html>
<html>
<head>
<style>
body{
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
.loader {
margin: auto;
border: 16px solid #f3f3f3;
/* Light grey */
border-top: 16px solid #3498db;
/* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
display: flex;
align-self: center;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.WebEntTxt {
color: white;
line-height: 1.5;
text-align: center;
text-decoration: none;
}
</style>
</head>
<body class="Background" background="Background.jpg">
<div class="loader"></div>
<!-- <h1 class="WebEntTxt">You are entering PUBGpot! Please wait!</h1> -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Without the need of putting any absolute values in the positioning - as other answers suggest-, you can use translate().
.loading-wrapper {
position: fixed;
top: 50%;
left: 50%;
display: flex;
flex-direction: column;
align-items: center;
transform: translate(-50%, -50%);
}
.loader {
border: 16px solid #f3f3f3;
/* Light grey */
border-top: 16px solid #3498db;
/* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.WebEntTxt {
color: red;
line-height: 1.5;
text-align: center;
text-decoration: none;
}
<div class="loading-wrapper">
<div class="loader"></div>
<h1 class="WebEntTxt">You are entering PUBGpot! Please wait!</h1>
</div>
Related
This question already has an answer here:
How to keep origin in center of image in scale animation?
(1 answer)
Closed 1 year ago.
So I'm trying to implement a loader that spins in the middle of the screen I have used transform:translate earlier do this ex:
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
I tried to implement something similar but instead of getting centered the top left appears to be in the center. Here's my code
HTML
<section class="waitwrapper" v-else>
<div class="loader"></div>
</section>
CSS
.waitwrapper{
background-color: #455879;
position: relative;
width: 98vw;
height: 97vh;
}
.loader{
border: 16px solid #f3f3f3;
border-top: 16px solid #455879; /* w3schools loader */
border-radius: 50%;
width: 20%;
aspect-ratio:1;
animation: spin 2s linear infinite;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
One trusted way to centralize one item is to use display: flex with justify-content: center and align-items: center in the parent element.
*, *::before, *::after{
box-sizing:border-box;
}
.waitwrapper{
background-color: #455879;
width: 98vw;
height: 97vh;
display:flex;
justify-content:center;
align-items:center
}
.loader{
border: 16px solid #f3f3f3;
border-top: 16px solid #455879; /* w3schools loader */
border-radius: 50%;
width: 20%;
aspect-ratio:1;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<section class="waitwrapper" v-else>
<div class="loader"></div>
</section>
But why your code doesn't work very well? I must tell you when you change transform property in your animation actually you overwrite it. And because of it transform: translate(-50%, -50%);, doesn't work enymore. For solve that problem you can use below solution
.waitwrapper{
background-color: #455879;
position: relative;
width: 98vw;
height: 97vh;
}
.loader{
border: 16px solid #f3f3f3;
border-top: 16px solid #455879; /* w3schools loader */
border-radius: 50%;
width: 20%;
aspect-ratio:1;
animation: spin 2s linear infinite;
position: absolute;
left:50%;
top:50%;
/* transform:translate(-50%,-50%); */
}
#keyframes spin {
0%{
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
<section class="waitwrapper" v-else>
<div class="loader"></div>
</section>
Don't use transform. Use display: flex; on the parent and margin: auto; on the spinner element — to center it both horizontally and vertically.
See the code comments for the needed changes:
/* Quick reset */ * {margin: 0; box-sizing: border-box; }
.loader-wrapper {
background-color: #455879;
position: fixed; /* why relative? use fixed! Should cover the page? */
z-index: 9999; /* overlay other elements */
width: 100vw;
height: 100vh;
display: flex; /* use display flex */
}
.loader {
height: 20%; /* use height instead of width */
aspect-ratio: 1;
margin: auto; /* center inside the flex parent */
border: 10px solid #f3f3f3;
border-top-color: transparent; /* use transparent instead */
border-radius: 50%;
animation: spin 2s linear infinite;
}
#keyframes spin {
to { transform: rotate(1turn); }
}
<section class="loader-wrapper">
<div class="loader"></div>
</section>
Here is one of the ways how to center position-absolute element with width set:
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
left: 0;
right: 0;
top:0;
bottom:0;
width:20%;
Complete snippet:
.waitwrapper{
background-color: #455879;
position: relative;
width: 98vw;
height: 97vh;
}
.loader{
border: 16px solid #f3f3f3;
border-top: 16px solid #455879; /* w3schools loader */
border-radius: 50%;
aspect-ratio:1;
animation: spin 2s linear infinite;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
left: 0;
right: 0;
top:0;
bottom:0;
width:20%;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<!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.0">
<title>Document</title>
</head>
<body>
<section class="waitwrapper" v-else>
<div class="loader"></div>
</section>
</body>
</html>
I'm doing a project with Flutter web. When Flutter web is opened the first time it takes a few seconds to load so I want to show a spinner loader. I've tried adding the following to the index.html:
<div class="loading">
<div class="loader" />
</div>
with these styles:
.loading {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-image: url("img/images.jpeg");
background-size: contain;
resize: both;
padding: 25px;
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border: 15px solid;
border-top: 16px solid #8a2245;
border-right: 16px solid white;
border-bottom: 16px solid #8a2245;
border-left: 16px solid white;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
But background-image has bad size and I want it to be small and located in de middle of spinner. How can I do that?
You can set size of background image using background-size property in px (pixel) or % (percentage). And align the image to center using background-position: center;
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I'm trying to make a spinner within a button to indicate that an action is loading. the problem is that if a button has no text in it, it will appear higher than the rest of the buttons, and I want them to be aligned.
Here's the HTML:
<div>
<button class='buttonclass'>aaa</button>
<button class='buttonclass'>
<span class="loader"></span>
</button>
<button class='buttonclass'>bbb</button>
</div>
and the CSS:
.buttonclass {
height: 40px;
width: 40px;
}
.loader {
display: inline-block;
border: 3px solid #f3f3f3; /* Light grey */
border-top: 3px solid #3498db; /* Blue */
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 0.75s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
25% { transform: rotate(45deg); }
75% { transform: rotate(315deg); }
100% { transform: rotate(360deg); }
}
and this is the result
enter image description here
I want all 3 buttons to be aligned, is it possible? thanks
You can use flex on the first div like that:
.buttonclass {
height: 40px;
width: 40px;
}
.loader {
display: inline-block;
border: 3px solid #f3f3f3; /* Light grey */
border-top: 3px solid #3498db; /* Blue */
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 0.75s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
25% { transform: rotate(45deg); }
75% { transform: rotate(315deg); }
100% { transform: rotate(360deg); }
}
.first{ display:flex; }
<div class="first">
<button class='buttonclass'>aaa</button>
<button class='buttonclass'>
<span class="loader"></span>
</button>
<button class='buttonclass'>bbb</button>
</div>
CSS Flexbox can help you out there. My approach with commented code:
div {
width: 200px; /*just for the example*/
display: flex;
flex-flow: row nowrap;
align-items: center;/*vertical alignment*/
justify-content: space-between;/* spacing / horizontal alignment*/
}
.buttonclass {
height: 40px;
width: 40px;
}
.loader {
display: inline-block;
border: 3px solid #f3f3f3; /* Light grey */
border-top: 3px solid #3498db; /* Blue */
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 0.75s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
25% { transform: rotate(45deg); }
75% { transform: rotate(315deg); }
100% { transform: rotate(360deg); }
}
<div>
<button class='buttonclass'>aaa</button>
<button class='buttonclass'>
<span class="loader"></span>
</button>
<button class='buttonclass'>bbb</button>
</div>
Here an example
let btn = document.querySelector("button");
btn.addEventListener("click", () => {
let loader = document.querySelector(".loader");
btn.classList.add("disabled");
loader.style.display = "block";
})
.buttonclass {
min-height: 40px;
min-width: 40px;
display: flex;
align-items: center;
transition: 300ms;
border: 1px solid lightgrey;
outline: none;
cursor: pointer;
}
.loader {
margin-left: 10px;
display: none;
border: 2px solid #f3f3f3; /* Light grey */
border-top: 2px solid #3498db; /* Blue */
border-radius: 50%;
width: 15px;
height: 15px;
animation: spin 0.45s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
25% { transform: rotate(45deg); }
75% { transform: rotate(315deg); }
100% { transform: rotate(360deg); }
}
.disabled {
background: lightgrey;
color: white;
border: 1px solid lightgrey;
pointer-events: none;
outline: none;
color: grey;
}
<button class="buttonclass">Click me<div class="loader"></div></button>
I'm trying to do a loader with HTML and CSS I have the loader done but there's an issue when I have information behind the center of the loader the information doesn't show and the reason is because I have background: white; that I need to avoid showing the gradient because if I remove the white color and put transparent the gradient appears.
So I need to fix the problem when I have something behind the loader
.loader {
display: flex;
justify-content: center;
position: fixed;
top: 50%;
left: 50%;
z-index: 10;
}
.loader .circle {
background-image:linear-gradient(90deg, #a03297, #e90b5a);
width: 80px;
height: 80px;
border-style: solid;
border-color: transparent;
border-radius: 50%;
border-width: 1px;
animation: rot 2s linear infinite;
padding: 10px;
box-sizing: content-box;
}
.circle > div {
background:white;
height: 100%;
width: 100%;
border-style: solid;
border-color:transparent;
border-radius: 50%;
border-width: 1px;
}
#keyframes rot {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg); }
}
<div class="loader">
<div class="circle">
<div></div>
</div>
</div>
<p style="text-align: center; margin-top: 140px;">aaaaaaasssssssssssssssssçççççççççççççççççççççççççççççççççççççççççssssssss</p>
Use mask to make the inner part transparent:
.loader {
background:linear-gradient(yellow, #e90b5a);
/* Show only 10px from the border */
-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 10px),#fff 0);
mask:radial-gradient(farthest-side,#0000 calc(100% - 10px),#fff 0);
border-radius: 50%;
position: fixed;
inset : calc(50% - 50px);
animation: rot 2s linear infinite;
}
#keyframes rot {
100% { transform: rotate(360deg); }
}
body {
background:linear-gradient(to right,grey,white)
}
<div class="loader"></div>
I've recently been working on a project which involves a heavyloaded webpage,
it loads the files in the background and then eventually will allow them to disappear after a certain amount of time,
I have tried my hardest to do some research but with many attempts I have not come to a usable conclusion. I'd love it if you could possibly help out,
I will probably edit my code later but for now im just using that codepen.io overused loading square, for your information.
If you can help, it'll be greatly appreciated, Here's my code.
Html
<!DOCTYPE html>
<html>
<head>
<style>html { overflow-y: hidden; }</style>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript">
s$("div.formSentMsg").delay(3200).fadeOut(300)
</script>
<div><center><i><p>Loading</p></i></center></div>
<meta charset="UTF-8">
<title>Loading Square</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div><span class="loader"><span class="loader-inner"></span></span></div>
</body>
</html>
Css
body, html {
height: 100%;
text-align: center;
}
body {
background-color: #edae38;
}
.loader {
display: inline-block;
width: 80px;
height: 80px;
position: relative;
border: 8px solid #3a3b3d;
animation: loader 4s infinite ease;
align-self: center;
box-shadow: 0px 0px 7px #3a3b3d;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #3a3b3d;
animation: loader-inner 4s infinite ease-in;
box-shadow: 0px 0px 2px #3a3b3d;
}
#keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes loader-inner {
0% {
height: 100%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 0%;
}
100% {
height: 100%;
}
}
p {
font-family: 'bignoodletitling';
top: 50px;
padding-bottom: 1px;
padding-top: 200px;
color: #3a3b3d;
font-size: 110px;
text-align: center;
text-shadow: 0px 0px 3px #3a3b3d;
}
I understand,
As probably one of you it might be extremely easy for you to achieve this but when i receive your inputit's greatly appreciated and it helps me learn for future references,
Thanks. - David
Just remove the element that contains the loading stuff once all of your assets have loaded. I gave the loading element an ID (#loadingEl) and am using jQuery to remove it on $(window).on('load'...
body,
html {
height: 100%;
text-align: center;
}
body {
background-color: #edae38;
}
.loader {
display: inline-block;
width: 80px;
height: 80px;
position: relative;
border: 8px solid #3a3b3d;
animation: loader 4s infinite ease;
align-self: center;
box-shadow: 0px 0px 7px #3a3b3d;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #3a3b3d;
animation: loader-inner 4s infinite ease-in;
box-shadow: 0px 0px 2px #3a3b3d;
}
#keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes loader-inner {
0% {
height: 100%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 0%;
}
100% {
height: 100%;
}
}
p {
font-family: 'bignoodletitling';
top: 50px;
padding-bottom: 1px;
padding-top: 200px;
color: #3a3b3d;
font-size: 110px;
text-align: center;
text-shadow: 0px 0px 3px #3a3b3d;
}
<!DOCTYPE html>
<html>
<head>
<style>
html { overflow-y: hidden; }
</style>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$("div.formSentMsg").delay(3200).fadeOut(300);
</script>
<div>
<center><i><p>Loading</p></i></center>
</div>
<meta charset="UTF-8">
<title>Loading Square</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div id="loadingEl"><span class="loader"><span class="loader-inner"></span></span>
</div>
<script>
$(window).on('load',function() {
$('#loadingEl').remove();
})
</script>
</body>
</html>