Develop Reference

CSS spinner without spinning text

I have a loading spinner on a page that shows after a button click for a few seconds.
I tried to add a loading text in the middle of the loading circle but its also spinning. How do I stop the text from spinning? I thought that a span tag is not affected by css transform.
function load() {
document.getElementById("loader").style.display = "block";
setTimeout(function() {
document.getElementById("loader").style.display = "none";
}, 4000);
}
.centered {
text-align: center;
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #ffffffbb;
border-radius: 50%;
border-top: 16px solid #9c5eb8b6;
-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);
}
}
.loading-text {
width: 90px;
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 45px);
text-align: center;
}
<button type='button' onclick='load()'>Click</button>
<div class="centered">
<div id="loader" style="display:none">
<span class="loading-text">Loading...</span>
</div>
</div>

Instead of having both the spinner and the text in the same element, add another. So we can only spin that one.
I've named it .spinner, next to loading-text:
function load() {
document.getElementById("loader").style.display = "block";
setTimeout(function(){
document.getElementById("loader").style.display = "none"; }, 4000);
}
.centered {
text-align: center;
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
.spinner {
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
border: 16px solid #ffffffbb;
border-radius: 50%;
border-top: 16px solid #9c5eb8b6;
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader, .loading-text {
width: 90px;
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 45px);
text-align: center;
}
<button type='button' onclick='load()'>Click</button>
<div class="centered">
<div id="loader" style="display:none">
<div class="spinner"></div>
<span class="loading-text">Loading...</span>
</div>
</div>

Or you can use pseudo-element like:
function load() {
document.getElementById("loader").style.display = "block";
}
.centered {
text-align: center;
position: fixed;
top: 50%;
left: 50%;
margin-top: -60px;
margin-left: -60px;
}
#loader {
position: absolute;
}
#loader:before{
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #ffffffbb;
border-radius: 50%;
border-top: 16px solid #9c5eb8b6;
-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);
}
}
.loading-text {
width: 90px;
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 45px);
text-align: center;
}
<button type='button' onclick='load()'>Click</button>
<div class="centered">
<div id="loader" style="display:none">
<span class="loading-text">Loading...</span>
</div>
</div>

Transform Rotate not working on my CSS when I added keyframes [duplicate]

I have a situation similar to this fiddle, where I have a CSS3 animation that scales an element absolute-positioned in the centre of another element. However, when the animation takes place it is off-centre, as seen by the red squares relative to blue in the example. How do I centre it? I have tried a couple of configurations around the transform-origin property, but this isn't producing the correct results.
#keyframes ripple_large {
0% {transform:scale(1); }
75% {transform:scale(3); opacity:0.4;}
100% {transform:scale(4); opacity:0;}
}
.container {
position: relative;
display: inline-block;
margin: 10vmax;
}
.cat {
height: 20vmax;
}
.center-point {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 10px;
width: 10px;
background: blue;
}
.to-animate {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid red;
height: 5vmax;
width: 5vmax;
transform-origin:center;
}
.one {
animation: ripple_large 2s linear 0s infinite;
}
.two {
animation: ripple_large 2s linear 1s infinite;
}
<div class='container'>
<img src='http://www.catster.com/wp-content/uploads/2017/08/Pixiebob-cat.jpg' class='cat'>
<div class='center-point'>
</div>
<div class='to-animate one'></div>
<div class='to-animate two'></div>
</div>

The issue is that you are overriding the translate transformation.
When you specify a new transformation (the one inside the animation) it override the first one. In your case you are removing the translation that is fixing the center alignment.
You need to add them to the same transform property and pay attention to the order because it's important (Why does order of transforms matter? rotate/scale doesn't give the same result as scale/rotate)
#keyframes ripple_large {
0% {
transform: translate(-50%, -50%) scale(1);
}
75% {
transform: translate(-50%, -50%) scale(3);
opacity: 0.4;
}
100% {
transform: translate(-50%, -50%) scale(4);
opacity: 0;
}
}
.container {
position: relative;
display: inline-block;
margin: 10vmax;
}
.cat {
height: 20vmax;
}
.center-point {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 10px;
width: 10px;
background: blue;
transform-origin: center;
}
.to-animate {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid red;
height: 5vmax;
width: 5vmax;
}
.one {
-webkit-animation: ripple_large 2s linear 0s infinite;
animation: ripple_large 2s linear 0s infinite;
}
.two {
-webkit-animation: ripple_large 2s linear 1s infinite;
animation: ripple_large 2s linear 1s infinite;
}
<div class='container'>
<img src='http://www.catster.com/wp-content/uploads/2017/08/Pixiebob-cat.jpg' class='cat'>
<div class='center-point'>
</div>
<div class='to-animate one'></div>
<div class='to-animate two'></div>
</div>
UPDATE
As commented, it's better to center your element using another method than translation to avoid changing the animation since this can be used with other elements.
Example:
#keyframes ripple_large {
0% {
transform: scale(1) ;
}
75% {
transform:scale(3) ;
opacity: 0.4;
}
100% {
transform: scale(4) ;
opacity: 0;
}
}
.container {
position: relative;
display: inline-block;
margin: 10vmax;
}
.cat {
height: 20vmax;
}
.center-point {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 10px;
width: 10px;
background: blue;
transform-origin:center;
}
.to-animate {
position: absolute;
top: 0;
left: 0;
bottom:0;
right:0;
margin:auto;
border: 1px solid red;
height: 5vmax;
width: 5vmax;
}
.one {
animation: ripple_large 2s linear 0s infinite;
}
.two {
animation: ripple_large 2s linear 1s infinite;
}
<div class='container'>
<img src='http://www.catster.com/wp-content/uploads/2017/08/Pixiebob-cat.jpg' class='cat'>
<div class='center-point'>
</div>
<div class='to-animate one'></div>
<div class='to-animate two'></div>
</div>

How to hide the scroll indicator on scroll?

Dear people of the Internet,
I have this css & html code to add an scroll indicator to my landing page.
My goal is; As soon as you scroll down, the indicator disappears and only appears again after reloading the page.
My jquery seems not to work, any help much appreciated!
$(window).scroll(function() {
if ($(this).scrollTop()>0)
{
$('.scrolli').fadeOut();
}
});
body{
margin: 0;
padding: 0;
background: #000;
}
.scrolli{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.scrolli span{
display: block;
width: 20px;
height: 20px;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
transform: rotate(45deg);
margin: -10px;
animation: animate 2s infinite;
}
.scrolli span:nth-child(2){
animation-delay: -0.2s;
}
.scrolli span:nth-child(3){
animation-delay: -0.4s;
}
#keyframes animate{
0%{
opacity: 0;
transform: rotate(45deg) translate(-20px,-20px);
}
50%{
opacity: 1;
}
100%{
opacity: 0;
transform: rotate(45deg) translate(20px,20px);
}
}
<div class="scrolli">
<span></span>
<span></span>
<span></span>
</div>

Your code is fine, it doesn't work because there isn't any available scroll, so $(this).scrollTop() can't ever be greater than zero.
You can see it working by making the body taller:
$(window).scroll(function() {
if ($(this).scrollTop()>0)
{
$('.scrolli').fadeOut();
}
});
body{
margin: 0;
padding: 0;
background: #000;
height: 200vh;
}
.scrolli{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.scrolli span{
display: block;
width: 20px;
height: 20px;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
transform: rotate(45deg);
margin: -10px;
animation: animate 2s infinite;
}
.scrolli span:nth-child(2){
animation-delay: -0.2s;
}
.scrolli span:nth-child(3){
animation-delay: -0.4s;
}
#keyframes animate{
0%{
opacity: 0;
transform: rotate(45deg) translate(-20px,-20px);
}
50%{
opacity: 1;
}
100%{
opacity: 0;
transform: rotate(45deg) translate(20px,20px);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scrolli">
<span></span>
<span></span>
<span></span>
</div>

loading animation not happening in container

I have a working example of a page loading animation when the user hits submit on the form here. Im trying to change the animation to something different but the newer animation is not happening inside the container and is loading even before the user hits submit on that form. The non working example can be found here
Can someone help me understand why this animation is not happening inside the container and why its being run when the page loads?
var myForm = document.getElementById('needs-validation');
myForm.addEventListener('submit', showLoader);
function showLoader(e) {
this.querySelector('.loader-container').style.display = 'block';
// the line below is just for the demo, it stops the form from submitting
// so that you can see it works. Don't use it
e.preventDefault();
}
#needs-validation {
/* .loader-container will be positionned relative to this */
position: relative;
}
.loader-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #9370DB;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #BA55D3;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
.loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FF00FF;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<form id="needs-validation">
<p>First name: <input type="text"></p>
<p>Last name: <input type="text"></p>
<p>Age: <input type="text"></p>
<button type="submit">Next</button>
<!-- insert your loader container here, inside the <form> element -->
<div class="loader-container">
<div class="loader"></div>
</div>
</form>

There was something messy in your .loader-container
Actually only thing I have done, I haave taken this class from working solution and added into the new one and it works.
In your new solution, you are missing the display:none at first place.
Here is an updated solution for you.
https://jsfiddle.net/v9dhqvrc/

jQuery stop animation method

I have this spinning div and I want it to stop when I click on a button by using the .stop() method, but for some reason it doesn't work. I hope you can shed some light on this issue for me.
Here is a snippet which performs the animation and demonstrates that the Stop animation button does not stop the animation.
$('button').bind('click', function(){
$('.player-disc').stop(true, false);
});
#player {
position: relative;
margin: 30px auto;
height: 300px;
width: 700px;
background-color: #E25822;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border-radius: 200px;
}
#player .player-disc {
-moz-animation: spin 5s infinite linear;
-webkit-animation: spin 5s infinite linear;
animation: spin 5s infinite linear;
height: 250px;
width: 250px;
background-color: black;
background-size: 250px;
position: absolute;
top: 50%;
left: 25px;
transform: translateY(-50%);
}
#player .player-disc span {
position: absolute;
width:30px;
height: 30px;
background-color:white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
#keyframes spin {
0% {
transform: translateY(-50%) rotate(0deg);
}
100% {
transform: translateY(-50%) rotate(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Stop animation</button>
<div id="player">
<div class="player-disc">
<span></span>
</div>
</div>
I've also tried any other combinations of .stop(false, false) etc.
a jsFiddle

It's a CSS animation, not a jQuery animation so you just need to set the css animation property to "none":
$('.player-disc').css('animation', 'none');

As others pointed out, it's CSS animation.
To stop it and reset disc to its original position use (this also resets animation):
$('.player-disc').css('animation', 'none');
To pause it and not reset disc to its original position use:
$('.player-disc').css('animation-play-state', 'paused');
You can then resume animation using:
$('.player-disc').css('animation-play-state', 'running');
$('#btn1').bind('click', function(){
$('.player-disc').css('animation', 'none');
});
$('#btn2').bind('click', function(){
$('.player-disc').css('animation-play-state', 'paused');
});
$('#btn3').bind('click', function(){
$('.player-disc').css('animation-play-state', 'running');
});
#player {
position: relative;
margin: 30px auto;
height: 300px;
width: 700px;
background-color: #E25822;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border-radius: 200px;
}
#player .player-disc {
-moz-animation: spin 5s infinite linear;
-webkit-animation: spin 5s infinite linear;
animation: spin 5s infinite linear;
height: 250px;
width: 250px;
background-color: black;
background-size: 250px;
position: absolute;
top: 50%;
left: 25px;
transform: translateY(-50%);
}
#player .player-disc span {
position: absolute;
width:30px;
height: 30px;
background-color:white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
#keyframes spin {
0% {
transform: translateY(-50%) rotate(0deg);
}
100% {
transform: translateY(-50%) rotate(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1" type="button">Set animation to none</button>
<button id="btn2" type="button">Pause animation</button>
<button id="btn3" type="button">Play animation</button>
<div id="player">
<div class="player-disc">
<span></span>
</div>
</div>

Your animation is being initialised in the CSS. Therefore you must stop it by CSS. $(".player-disc").css("animation-play-state", "paused");

Try this code...
$("button").click(function(){
$('.player-disc').css('animation', 'none');
});
Fiddle