This question already has answers here:
How to make a div 100% height of the browser window
(40 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 4 years ago.
I am using flexbox and already succeed to make it centered horizontally, at you can see by running the snippet below, but it is not centered vertically and I don't get why
Here is a JSFiddle if you prefer.
.main {
display: flex;
align-items: center;
justify-content: center;
}
.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;
max-width: 50%;
}
/* Safari */
#-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="main">
<div class="loader"></div>
</div>
You need to give a height to main class. As for example: height: 100vh; See:
.main {
display: flex;
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;
max-width: 50%;
}
/* Safari */
#-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="main">
<div class="loader"></div>
</div>
The .main element has the same height as the .loader element (i.e. the items are vertically centered, but there is no space to see it).
You need to set the height of .main to the height you want to center in.
.main {
display: flex;
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;
max-width: 50%;
}
/* Safari */
#-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="main">
<div class="loader"></div>
</div>
Related
I am trying to create a codepen where I have a circle that moves in a circular path based on its parent div getting rotated. I rotate the text inside the circle in the opposite direction at the same rate so that it create the allusion that the text does not rotate at all and stay upright. However, I would like to add an animation that pulses when I am hovering over the circle. I was able to do this, but the problem is that the text is then changing back to its original rotation (which is based on the orientation of the circle, and the text will not be upright).
Here is my code for anyone to replicate
HTML
<div class="container">
<div class="parent">
<div class="child">
<p>Word</p>
</div>
</div>
</div>
CSS
.container {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: blue;
}
.parent {
display: flex;
align-items: center;
/* justify-content: center; */
background-color: red;
width: 600px;
height: 600px;
animation: square-rotate 30s linear infinite;
pointer-events: none;
}
#keyframes square-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.child {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
width: 100px;
height: 100px;
border-radius: 50%;
pointer-events: auto;
}
p {
animation: text-rotate 30s linear infinite forwards;
animation-fill-mode: forwards;
pointer-events: auto
}
#keyframes text-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
.parent:hover {
background-color: green;
animation-play-state: paused;
}
.child:hover p {
/* animation-play-state: paused; */
animation: pulse 1s linear infinite;
}
#keyframes pulse {
0% {
transform:scale(1);
}
50% {
transform:scale(1.3);
}
100% {
transform:scale(1);
}
}
What exactly am I missing here? I need the text to not reset back to its rotation according to the white circle and just go through the pulse animation at whatever rotation it was in when my pointer hovers over the element.
In the following snippet you can see a space between h2 and animation. I want it remove it in my case.How can I do this?
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 50px;
height: 50px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
h2 {
text-align: center;
}
<h2>xyzxyzxyzxyz.
<div class="loader" style="float:right;"></div>
</h2>
JSFIDDLE: https://jsfiddle.net/wdzLv7tk/
Float:right cause the problem. There are so many ways to keep the element side by side. I applied one of them. Here I have display:table for my parent element and for each child it is display:table-cell which gives a solution to your problem.
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 50px;
height: 50px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
}
.parent {
display: table;
margin:auto;
}
.child {
display: table-cell;
}
h2 {}
/* Safari */
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
h2 {
text-align: center;
}
<div class="parent">
<h2 class="child">xyzxyzxyzxyz.</h2>
<div class="loader child" style=""></div>
</div>
Just use text-align: right instead of text-align: center
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 50px;
height: 50px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
h2 {
text-align: right;
}
<h2>xyzxyzxyzxyz.<div class="loader" style="float:right;"></div></h2>
I have this loader working fine.
CSS:
.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;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div *ngIf="somevalue" class="loader"></div>
Now I need put some text in center
but my try not working. How Can I let my loader like in second image? I dont want install more external components, md-progress-loader, md-circle...etc.. TRY IT
A very simple solution is to just place the text into another div and position it accordingly - something like
<div class="container">
<div class="loader"></div>
<div class="description">Text</div>
</div>
and
.description
{
position: absolute;
top:0;
left:0;
line-height:150px;
width:152px;
text-align:center;
}
.container
{
position:relative;
}
This counters the rotation and provides a roughly sane box in which other elements can be placed.
.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); }
}
.loader div {
display: block;
animation: spin 2s linear infinite reverse;
position: relative;
height: 100%;
}
.loader div span {
display: inline-block;
text-align: center;
}
<div *ngIf="somevalue" class="loader"><div><span>testing lots of text in this text box</span></div></div>
I am trying to implement a spinner only using CSS that looks like on following image, see the picture. Only one piece of the spinner is filled with color at a time.
In the following fiddle, there is a similar spinner, but I need to rotate the whole spinner (22.5°) and also to modify its rays.
http://jsfiddle.net/ucsnaukf/
HTML:
<div class="spinner"><div>Loading…</div></div>
CSS:
#-webkit-keyframes spin {
to { transform: rotate(1turn); }
}
#-moz-keyframes spin {
to { transform: rotate(1turn); }
}
#-ms-keyframes spin {
to { transform: rotate(1turn); }
}
#keyframes spin {
to { transform: rotate(1turn); }
}
.spinner {
position: relative;
display: inline-block;
width: 5em;
height: 5em;
margin: 0 .5em;
font-size: 12px;
text-indent: 999em;
overflow: hidden;
-webkit-animation: spin 0.8s infinite steps(8);
-moz-animation: spin 0.8s infinite steps(8);
-ms-animation: spin 0.8s infinite steps(8);
-o-animation: spin 0.8s infinite steps(8);
animation: spin 0.8s infinite steps(8);
}
.spinner:before,
.spinner:after,
.spinner > div:before,
.spinner > div:after {
content: '';
position: absolute;
top: 0;
left: 2.25em; /* (container width - part width)/2 */
width: .5em;
height: 1.5em;
border-radius: .2em;
background: #eee;
box-shadow: 0 3.5em #eee; /* container height - part height */
transform-origin: 50% 2.5em; /* container height / 2 */
}
.spinner:before {
background: blue;
}
.spinner:after {
transform: rotate(-45deg);
}
.spinner > div:before {
transform: rotate(-90deg);
}
.spinner > div:after {
transform: rotate(-135deg);
}
Can anyone help?
Here's a start for you (http://jsfiddle.net/ucsnaukf/73/):
<--! HTML -->
<div class="wrapper">
<div class="spinner">
<div>Loading…
</div>
</div>
<div class="circ"></div>
</div>
/* CSS */
#-webkit-keyframes spin {
to { transform: rotate(1turn); }
}
#-moz-keyframes spin {
to { transform: rotate(1turn); }
}
#-ms-keyframes spin {
to { transform: rotate(1turn); }
}
#keyframes spin {
to { transform: rotate(1turn); }
}
.wrapper{
border:1px solid white;
border-radius:100%;
position:relative;
width: 5em;
height: 5em;
border-radius:999px;
overflow:hidden;
}
/* Circular mask */
.circ{
border:1px solid WHITE;
position:absolute;
top:10%;
left:10%;
right:0;
bottom:0;
width:55%;
height:55%;
background-color:#fff;
border-radius:999px;
}
.spinner {
border:1px solid white;
border-radius:100%;/* Round the border */
position: absolute;
display: inline-block;
width: 5em;
height: 5em;
font-size: 12px;
text-indent: 999em;
overflow: hidden;
-webkit-animation: spin 0.8s infinite steps(8);
-moz-animation: spin 0.8s infinite steps(8);
-ms-animation: spin 0.8s infinite steps(8);
-o-animation: spin 0.8s infinite steps(8);
animation: spin 0.8s infinite steps(8);
}
.spinner:before,
.spinner:after,
.spinner > div:before,
.spinner > div:after {
content: '';
position: absolute;
top: 0;
left: 1.8em; /* (container width - part width)/2 */
width: 1.4em; /* longer */
height: .8em; /* shorter */
background: #eee;
box-shadow: 0 4.2em #eee; /* container height - part height */
transform-origin: 50% 2.5em; /* container height / 2 */
}
.spinner:before {
background: purple;
}
.spinner:after {
transform: rotate(-45deg);
}
.spinner > div:before {
transform: rotate(-90deg);
}
.spinner > div:after {
transform: rotate(-135deg);
}
Looks a bit flower like, but continue playing with it and you'll get it the way you want.
You may want to consider used one of the many, great looking, free to use spinners available on the web... check out this massive collection for example: http://codepen.io/collection/HtAne/
This question already has answers here:
CSS3 Translate across an Arc
(3 answers)
Closed 7 years ago.
Is it possible with current CSS3 to animate an object (DIV) along an this arc?
I've forked the (very good) #ArunBertil "fulcrum" solution to convert it to CSS3 Animation:
Running Demo
CSS
#keyframes drawArc1 {
0% { transform: rotate(180deg); }
100% { transform: rotate(0deg); }
}
#keyframes drawArc2 {
0% { transform: rotate(-180deg); }
100% { transform: rotate(0deg); }
}
body{
padding: 150px;
background: black;
}
.wrapper {
width: 300px;
animation: drawArc1 3s linear infinite;
}
.inner {
border-radius: 50%;
display: inline-block;
padding: 30px;
background: yellowgreen;
animation: drawArc2 3s linear infinite;
}
HTML
<div class="wrapper">
<div class="inner"></div>
</div>
Watch it on FireFox... to run it on other browsers, simply put the prefixes (#-webkit-keyframes, etc)
Check this
http://dabblet.com/gist/1615901
.wrapper {
width: 500px;
margin: 300px 0 0;
transition: all 1s;
transform-origin: 50% 50%;
}
.inner {
display: inline-block;
padding: 1em;
transition: transform 1s;
background: lime;
}
html:hover .wrapper {
transform: rotate(180deg);
}
html:hover .inner {
transform: rotate(-180deg);
}
Well, working on the work of Andrea based on the work of Arun ...
simplified to make use of only 1 div, and 1 animation:
#keyframes drawArc {
0% { transform: rotate(0deg) translateX(150px) rotate(0deg) ;}
100%{ transform: rotate(-180deg) translateX(150px) rotate(180deg); }
}
#-webkit-keyframes drawArc {
0% { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg) ;}
100%{ -webkit-transform: rotate(-180deg) translateX(150px) rotate(180deg); }
}
body{
padding: 150px;
background: black;
}
.test {
width: 30px;
border-radius: 50%;
display: inline-block;
padding: 30px;
background: yellowgreen;
animation: drawArc 3s linear infinite;
-webkit-animation: drawArc 3s linear infinite;
}
demo
Added also text in the div to show that it doesn't rotate