This question already has answers here:
How can I horizontally center an element?
(133 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
How to center a "position: absolute" element
(31 answers)
Closed 2 years ago.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
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); }
}
</style>
</head>
<body>
<h2>How To Create A Loader</h2>
<div class="loader"></div>
</body>
</html>
I am not able to align the loader at the center of the screen.
I have tried putting align:center in the loader class but that did not work.
Use flex box it would be simple and no extra css.
display: flex;
align-items: center;
You can study about flex box for further details, here and here
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
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); }
}
</style>
</head>
<body>
<h2>How To Create A Loader</h2>
<div class="loader"></div>
</body>
</html>
Welcome to Stack Overflow, Himanshu.
You can use the margin property to center the loader on the screen. The margin property sets the margins for an element (i.e. how far to the top, right, bottom and/or left an item is in relation to another on the DOM). If you supply auto to margin-left and margin-right, the loader will be positioned on the center of the screen.
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
margin-left: auto;
margin-right: auto;
}
A shortened version would be margin: 0 auto 0 auto;.
Related
I tried making a rotating square that would turn into an oval while rotating 180 degrees, the issue I encountered is that as the square rotates it moves to the left so that the top-left corner always stays in the same. Visualization of the problem. I think it's caused by the fact that my animation changes the width of the square:
`#keyframes squarestuff {
50% {
transform: rotate(180deg);
width: 5rem;
border-radius: 50%;
}`
try adding this
#keyframes squarestuff {
50% {
transform: rotate(180deg);
width: 5rem;
border-radius: 50%;
transform-origin:center center;
}
Since it transform the center and rotate about new center.
make the width of div contain the square as width of square if still there is problem
This is it:
https://jsfiddle.net/0pz1tv7q/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
height: 100px;
width: 100px;
border: 5px solid black;
background: red;
position: absolute;
animation: mymove 5s;
animation-fill-mode: forwards;
}
#keyframes mymove {
100% {
transform: rotate(180deg);
width: 25%;
border-radius: 50%;
}
}
</style>
</head>
<body>
<h2>Square CSS</h2>
<div></div>
</body>
</html>
Assuming you want the center of the oval to remain in the center of the 'square' (i.e not to move) then you can use a transform scale instead of changing the width.
This snippet rotates the square with its center always in the same place and adds the oval as a pseudo element so you see what is happening and that the center does not move:
div {
width: 10rem;
height: 10rem;
background-color: magenta;
animation: squarestuff 5s linear infinite;
transform-origin: center center;
position: relative;
}
#keyframes squarestuff {
50% {
transform: rotate(180deg);
}
}
div::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1, 1);
background: blue;
width: 10rem;
height: 10rem;
animation: square2oval 5s linear infinite;
z-index: 1;
display: inline-block;
}
#keyframes square2oval {
50% {
transform: translate(-50%, -50%) scale(0.5, 1);
border-radius: 50%;
}
}
<div></div>
I want to put a spinner inside a div that contains a video.
This video takes a few seconds to display as it is hosted on aws.
I have managed to make the spinner but it takes up the whole page. I can't get it to adapt to the div it is entered in.
#cover-div-spin {
position:fixed;
width:100%;
left:0;right:0;top:0;bottom:0;
background-color: rgba(0,0,0,0.7);
z-index:2;
/*display:none;*/
}
/* Safari */
#-webkit-keyframes spin {
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
#cover-div-spin::after {
/*position: fixed;*/
left: 50%;
top: 50%;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #c4040c;
width: 100px;
height: 100px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
content:'';
display:block;
position:absolute;
left:48%;top:40%;
-webkit-animation: spin .8s linear infinite;
animation: spin .8s linear infinite;
}
<div class="col-md-4" style="background:orange;">
<span><b>Example</b></span>
<div align="center" class="embed-responsive embed-responsive-16by9">
<div id="cover-div-spin"></div>
<video class="embed-responsive-item" src="" controls muted></video>
</div>
</div>
https://jsfiddle.net/JorgePalaciosZaratiegui/pdzm1ano/17/
Any ideas to solve this?
Thanks in advance.
First, your #cover-div-spin should have an absolute position instead of a fixed one.
To understand more about positionning, let's read the MDN docs:
position: absolute
The element is removed from the normal document flow, and no space is
created for the element in the page layout. It is positioned relative
to its closest positioned ancestor, if any; otherwise, it is placed
relative to the initial containing block.
position: fixed
The element is removed from the normal document flow, and no space is
created for the element in the page layout. It is positioned relative
to the initial containing block established by the viewport
I've also changed hte #cover-div-spin display:flex;, it will allow us to easily center the spinner.
#cover-div-spin {
position:absolute; /* absolute instead of fixed */
width:100%;
left:0;right:0;top:0;bottom:0;
background-color: rgba(0,0,0,0.7);
z-index:2;
display: flex; /* Allow us to easily center the spinner */
align-items: center; /* Vertical alignement */
justify-content: center; /* Horizontal alignement */
}
/* Safari */
#-webkit-keyframes spin {
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
#cover-div-spin::after {
/* Removed all position rules */
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #c4040c;
width: 100px;
height: 100px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
content:'';
display:block;
-webkit-animation: spin .8s linear infinite;
animation: spin .8s linear infinite;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-4" style="background:orange;">
<span><b>Example</b></span>
<div align="center" class="embed-responsive embed-responsive-16by9">
<div id="cover-div-spin"></div>
<video class="embed-responsive-item" src="" controls muted></video>
</div>
</div>
to be exact center, the left and top cannot be full 50%, but, 50% - half the width of the spinner (on your case the spinner is 100px, so half is 50px), like this (i just change the left & top, and remove duplicate left and top at the bottom)
#cover-div-spin::after {
/*position: fixed;*/
left: calc(50% - 50px);
top: calc(50% - 50px);
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #c4040c;
width: 100px;
height: 100px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
content:'';
display:block;
position:absolute;
/* left:48%; top:40%; remove this */
-webkit-animation: spin .8s linear infinite;
animation: spin .8s linear infinite;
}
and if you want to make the spinner only on the div, just change the position on #cover-div-spin to absolute, like this
#cover-div-spin {
position:absolute;
}
#cover-div-spin::after {
left:50%;
top:50%;
transform:translate(-50%, 50%);
}
you have to just add this 3 line in #cover-div-spin::after otherwise all code lines are perfect.
when we move any element 50% top and left we have to minus the element -50% which ever the side we use.
if we want to align vertically center then it will be like top:50%; trasnfrom:translateY(-50%); and if we need to center horizontally then left:50%; trasnfrom:translateX(-50%); and if we need to center both horizontal and vertical then you can use above code;
Something like the following example could help.
.col-md-4,
.embed-responsive {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
flex-flow: column;
}
.col-md-4 span {
height: 100%;
}
.col-md-4 {
height: 12rem;
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#cover-div-spin {
background-color: transparent;
z-index: 2;
width: 8rem;
height: 8rem;
position: absolute;
}
#cover-div-spin::after {
border: 1rem solid #f3f3f3;
border-radius: 50%;
border-top: 1rem solid #c4040c;
width: 6rem;
height: 6rem;
align-self: center;
content: '';
display: inline-flex;
-webkit-animation: spin .8s linear infinite;
animation: spin .8s linear infinite;
}
.embed-responsive-item {
z-index: 1;
top: 2rem;
position: absolute;
}
<div class="col-md-4" style="background:orange;">
<span><b>Example</b></span>
<div id="cover-div-spin"></div>
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" src="" controls muted></video>
</div>
</div>
I have a css loader with infinite spin animation, I want the border line cap rounded, Is there any trick to get the border stroke line cap rounded? I tried stroke-linecap: round; but seems only for SVG, How to apply it to the html element border?
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
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); }
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="loader"></div>
</body>
</html>
You can do it with some background applied to a pseudo element:
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
position:relative;
}
.loader::before {
content:"";
position:absolute;
width:100%;
top:0;
height:20px;
--rad:radial-gradient(circle 8px,#3498db 99%,transparent 100%);
background:
var(--rad) left -14px top 0,
var(--rad) right -14px top 0;
background-size:200% 100%;
}
#keyframes spin {
100% {
transform: rotate(360deg);
}
}
<div class="loader"></div>
Related question to get a different idea: CSS curved line with rounded
I want to add an loader in my angular 4 PWA. https://www.w3schools.com/howto/howto_css_loader.asp this loader is visible till all the contents of page get loaded.
<div *ngIf="isLoaded" class="loader"></div>
<div class="home-container" [hidden]="isLoaded"></div>
Initially isLoaded is true after loading all contents it will become false.
loader poistion => top => 0, right = 50%, left = 50%, bottom= 100%
.scss file
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #59d4bf; /* green */
border-radius: 50%;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
here -stackblitz live code sample
Your should put your css,
margin-right: 50%; or margin-right: auto;
margin-top: 50%;
margin-left: 50%; or margin-right: auto;
your loader
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
margin-left: 50%;
margin-right: 50%;
margin-top: 50%;
}
is it working , Live working code sample
JS Fiddle: fiddle and here is the code:
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
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); }
}
<div class="loader"></div>
How do I centre it horizontally & vertically?
I tried:
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
But transform:translate(-50%,-50%); do not work
Give below css to .loader class:
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
position:fixed;
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
position:fixed;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="loader"></div>
You can make it position:absolute;
and give it:
top:0;
left:0;
right:0;
bottom:0;
to make it both vertically and horizontally aligned into the middle.
body {
overflow:hidden;
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
margin:auto;
top:0;
left:0;
bottom:0;
right:0;
position:absolute;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="loader"></div>
Easiest way to center element using CSS is by using flexbox. No hacks required.
if need to set parent container with display: flex.
<div class="container">
<div class="item">
Aligned Item
<div>
</div>
CSS:
.container {
display: flex;
align-items: center;
justify-content: center;
}
.item {
width: 200px;
height: 200px;
}
All elements with class item will be centrally aligned.
More details can be found at
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
Several ways to do it.
Using flexbox. This would work in any container anywhere on the page.
body { /* or some wrapper, if you plan to have other things in body */
min-height: 100vh; /* this just expands the body height so the vertical alignment is visible in the snippet */
display: flex;
justify-content: center; /* center horizontally */
align-items: center; /* center vertically */
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="loader"></div>
Using position: absolute. This centers the div relative to the document, not loader's parent element.
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
/* i added this: */
position: absolute;
left: calc(50% - 120px / 2); /* 50 % of body width minus half of .loader size… */
top: calc(50% - 120px / 2); /* …and the same thing with height */
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="loader"></div>
Please add body {height: 100vh;} and update the css of loader div as the following:
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
https://jsfiddle.net/7baw2rmp/