I want to put a loading css right in the center of my screen and I want it to work mobile as well as in desktop. Currently, my CSS is this:
.spinner {
width: 100px;
height: 100px;
position:absolute;
top: 50%;
left: 50%;
margin: 100px auto;
z-index:99999;
}
.double-bounce1, .double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #333;
opacity: 0.3;
position: absolute;
top: 0;
left: 0;
z-index:99999;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
z-index:99999;
}
This is what I currently have
You can see it is not entirely centered and I don't know how to achieve this. The spinner div is in my application.html.erb inside the body tag above the yield.
How can I center this at the exact center of the web page including the sidenav and navbar?
You can use the below CSS inside .spinner:
transform: translate(calc(-50%), calc(-50%));
position: fixed; /* if absolute doesn't work */
margin: 0; /* no need of margin */
So the fix was easy... I just added the code below to the .spinner class in the CSS.
transform: translate(calc(-50%), calc(-50%));
position: fixed;
The only thing I still have a problem with is that the spinner is too far down. I think changing top: 50% to top: 40% might do the trick.
Related
so I am trying to add a loader to a webpage and it wont hide the all elements, although on a page it does at another html it doesnt , it's about a logo which z-index is set to 1 but the loader its set to 99999, I've tried to change the z-index of the logo to 0 but it still shows up, SO studying more the only difference is that on a page the logo is anchor and on another its not , and where its declared as anchor it wont hide on loading animation.
<div class="white-logo"><img src="img/logo_black.png" alt="logo_white"></div>
.loader_bg{
position: fixed;
z-index: 999999;
background: #fff;
width: 100%;
height: 100%;
}
.loader{
border: 0 soild transparent;
border-radius: 50%;
width: 150px;
height: 150px;
position: absolute;
top: calc(50vh - 200px);
left: calc(50vw - 75px);
text-align: center;
}
.loader:before, .loader:after{
content: '';
border: 1em solid #BDBDBD;
border-radius: 50%;
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
animation: loader 2s linear infinite;
opacity: 0;
}
.loader:before{
animation-delay: .5s;
}
#keyframes loader{
0%{
transform: scale(0);
opacity: 0;
}
50%{
opacity: 1;
}
100%{
transform: scale(1);
opacity: 0;
}
}
.white-logo > a > img {
display: run-in;
width: 5%;
margin-left: 10%;
margin-top: -8.5%;
position: absolute;
z-index: 1;
}
I added some screenshots to understand the problem with the difference , I think is from anchor but I dont know what to do
Here are the photos and the difference
I am not certain if this is what you want (I assume the animation should display over the .loader_bg) so I just set the .loader_bg to have a negative z-index.
.loader_bg {
z-index: -1;
}
I have taken the liberty of making a jsfiddle with the relevant code in, but you will need to update if this is not the desired effect, adding an example would help, but you can also edit the fiddle and iterate over it.
EDIT
Sorry I see the issue now, I added some text to the anchor.
Change your .loader_bg with these properties:
.loader_bg {
z-index:0;
top: 0;
}
Solved, seemed I had two files with the css animation, one for the text and one for the circles, I put all of them in one file and it worked, thank you!
I have a div with the following css code:
.popup{
width: 50%;
margin: auto;
display: none;
animation-name: popup;
animation-duration: 0.15s;
position: fixed;
background-color: #cf5c36;
}
And I can't figure out how to center it. All the advice I can find involves changing the display, or doesn't work with display: none;. Does anyone know how I could go about it it?
You can set the absolute position and transform it to center
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
I have a container of variable height, and would like to put an element at the middle of it. So I've set these styles:
#parent {
position: relative;
}
#child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Which work in most cases. However, the container's height is not only variable, but it also changes constantly.
Because of this, that code won't work. An example:
#keyframes changeSize {
0% {
height: 100px;
}
50% {
height: 150px;
}
100% {
height: 100px;
}
}
#parent {
position: relative;
width: 400px;
height: 300px;
background: red;
animation-name: changeSize;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#child {
position: absolute;
margin-block-start: 0;
margin-block-end: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
<div id="parent">
<p id="child">I should not be moving...</p>
</div>
As you can see, it's moving. So, my question is, is there a way to place it in the middle of the element (vertically) but without having it move if the container changes size - just with CSS?
The issue is that percentage measure units are relative to the containing element. Since the #parent is changing in height through the animation, the value of a percentage unit changes. The unit change affects the percentage height property applied to the #child. The work-around might be some very complicated CSS (might not work in every situation) so the best solution is to use JavaScript to capture the initial 50% height in pixels so the unit no longer changes. It is important to also use a resize event listener to apply a new 50% height should the browser window be resized.
window.addEventListener('load',resizeDiv());
window.addEventListener('resize',resizeDiv());
function resizeDiv(){
var initialHeight = document.getElementById('parent').offsetHeight/2;
document.getElementById('child').style.top = initialHeight+'px';
}
#keyframes changeSize {
0% {
height: 100px;
}
50% {
height: 150px;
}
100% {
height: 100px;
}
}
#parent {
position: relative;
width: 400px;
height: 300px;
background: red;
animation-name: changeSize;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#child {
position: absolute;
margin-block-start: 0;
margin-block-end: 0;
right: 0;
}
<div id="parent">
<p id="child">Hey!! I'm not moving anymore!</p>
</div>
Is it possible to have a body background image aligned to the edge of a container element?
Using boostrap 3, I want a background to the page that is fixed to a container edge, so when resizing, the background moves with the container (ie, in the example below, the background image centered over the container edge):
(source: nfx.nz)
Is this possible with a background image, or would I have to add a new absolutely positioned layer / or javascript...?
There are several solutions to your question, and it really depends on if you require dynamic sizing of the background. The example I have shown will animate the container dynamically, so you can see how it works.
Approach No. 1: Offset background position with known value
One is if you know the exact dimensions of the image, then you can simply position it negatively along the x-axis (i.e. moving it to the left) by half the width of the image. This is assuming that you are not dynamically sizing your background image:
* {
margin: 0;
padding: 0;
}
div {
background-color: steelblue;
background-image: url('http://placehold.it/400x200');
background-repeat: no-repeat;
background-position: -200px 0;
width: 50%;
margin: 0 auto;
height: 500px;
animation-name: pulse;
animation-duration: 3s;
animation-iteration-count: infinite;
}
#keyframes pulse {
0% {
width: 50%;
}
50% {
width: 100%;
}
100% {
width: 50%;
}
}
<div>
Background image dimension: 400x200
</div>
Approach No. 2: Use pseudo/dummy element
If your background size is dynamic (i.e. changes with the size of the container), you are better off using an absolutely positioned pseudo-element or a dummy element:
* {
margin: 0;
padding: 0;
}
div {
background-color: steelblue;
width: 50%;
margin: 0 auto;
height: 500px;
animation-name: pulse;
animation-duration: 3s;
animation-iteration-count: infinite;
position: relative;
overflow: hidden;
}
div::before {
background-image: url('http://placehold.it/400x200');
background-repeat: no-repeat;
background-size: 100%;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -50%;
right: 50%;
}
div > * {
position: relative;
}
#keyframes pulse {
0% {
width: 50%;
}
50% {
width: 100%;
}
100% {
width: 50%;
}
}
<div>
<p>Background image dimension: 400x200</p>
</div>
I'm trying to absolutely center two elements in the middle of the page, with one behind the other. The intent is to have a page that is fully responsive with a circle in the middle which has a pulse effect behind it.
Here is a fiddle of the below:
html,
body {
height: 100%;
width: 100%;
}
body {
background: lightblue;
display: flex;
align-items: center;
justify-content: center;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.sphere {
display: flex;
background: black;
border-radius: 300px;
height: 100px;
width: 100px;
}
.container:after {
display: flex;
background: #FFF;
border-radius: 300px;
height: 130px;
width: 130px;
animation: pulsate 2.5s ease-out;
animation-iteration-count: infinite;
opacity: 0.0;
content: "";
z-index: -1;
margin: auto;
}
#keyframes pulsate {
0% {
transform: scale(0.1, 0.1);
opacity: 0.0;
}
50% {
opacity: 1.0;
}
100% {
transform: scale(1.2, 1.2);
opacity: 0.0;
}
}
<div class="container">
<div class="sphere"></div>
</div>
Method:
I'm currently using flexbox to center a container div with a circle inside, and an :after tag on the container to create the pulse. I've tried using z-indexing (doesn't seem to do anything), and absolute positioning (which requires hard-coded px values which I'd like to stay away from).
Is there a graceful way to achieve this using flexbox?
Desired Effect:
This is close, but I'd like to move away from using px values for the :after element if possible.
Not sure if that'll do it, but you could simply add to your :after
position: absolute;
top : 0;
left : 0;
bottom: 0;
right : 0;
fiddle: http://jsfiddle.net/ccyd6xh1/
Update that was a quick draft, and was not absolutely responsive. If you want the effect the really follow your sphere and its size, you should add the :after on the sphere element and not its container, and use % width and height (here the glow grows to 130% of the sphere size):
http://jsfiddle.net/tjoo739y/
This is easily created with position: absolute, which removes the elements / pseudo elements from the normal flow of the document so they ignore each other. You can use flexible units and don't need to use px. There is no need for the flex properties to achieve this.
The .sphere element is given its height / width and is centered. The circles conform to this width / height and position.
Using a pseudo-element for the black circle is the easiest way to have it overlap the white pulsating circle. Both the circles are now siblings and the second sibling will overlap naturally
The pseudo-element children of .sphere are stretched to fit the parents height and width with the top / left / bottom / right properties set at 0.
One way to keep this responsive is to use a viewport width unit for the width and height. This will keep the height / width 1:1.
Example
body {
background: lightblue;
}
.sphere {
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: absolute;
height: 10vw;
width: 10vw;
}
.sphere:before,
.sphere:after {
position: absolute;
content: '';
border-radius: 50%;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.sphere:before {
background: #FFF;
animation: pulsate 2.5s ease-out infinite;
}
.sphere:after {
background: black;
}
#keyframes pulsate {
0%, 100% {
opacity: 0;
}
0% {
transform: scale(0.1, 0.1);
}
50% {
opacity: 1.0;
}
100% {
transform: scale(1.5, 1.5);
}
}
<div class="sphere"></div>