Develop Reference

Uncaught TypeError: $ is not a function $('#loader').hide()

I want to add my page to a loading spinner. I want to hide spinner when page loaded. I want to show that when button clicked and i want to hide again when json process is finished. I can't continue because I got an error even in the first step. Here is the code i got in the first step :
Uncaught TypeError: $ is not a function
All HTML, CSS and Javascript codes are below:
window.addEventListener('load', function () {
$('#loader').hide();
})
.loader {
position: absolute;
top: calc(50% - 32px);
left: calc(50% - 32px);
width: 64px;
height: 64px;
border-radius: 50%;
perspective: 800px;
}
.inner {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
}
.inner.one {
left: 0%;
top: 0%;
animation: rotate-one 1s linear infinite;
border-bottom: 3px solid green;
}
.inner.two {
right: 0%;
top: 0%;
animation: rotate-two 1s linear infinite;
border-right: 3px solid green;
}
.inner.three {
right: 0%;
bottom: 0%;
animation: rotate-three 1s linear infinite;
border-top: 3px solid green;
}
#keyframes rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
#keyframes rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
#keyframes rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
<div id="loading">
<div class="loader">
<div class="inner one"></div>
<div class="inner two"></div>
<div class="inner three"></div>
</div>
</div>
How can i solve this problem ?

it seems like your using Vanilla JS, so you need to use querySelector, or otherwise if you're using jQuery, so you need to call the jQuery library at your header.
so incase your using the Vanila JS so you can call it like this
window.addEventListener('load', function () {
setTimeout( () => {document.querySelector('.loader').style = 'display:none;'}, 2000);
})
.loader {
position: absolute;
top: calc(50% - 32px);
left: calc(50% - 32px);
width: 64px;
height: 64px;
border-radius: 50%;
perspective: 800px;
}
.inner {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
}
.inner.one {
left: 0%;
top: 0%;
animation: rotate-one 1s linear infinite;
border-bottom: 3px solid green;
}
.inner.two {
right: 0%;
top: 0%;
animation: rotate-two 1s linear infinite;
border-right: 3px solid green;
}
.inner.three {
right: 0%;
bottom: 0%;
animation: rotate-three 1s linear infinite;
border-top: 3px solid green;
}
#keyframes rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
#keyframes rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
#keyframes rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
<div id="loading">
<div class="loader">
<div class="inner one"></div>
<div class="inner two"></div>
<div class="inner three"></div>
</div>
</div>
PS. i'm using Timeout with 2seconds because no thing to load.

It seems like you are using jquery, so make sure you have added <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> in the head tag.
Also change $('#loader') to $('.loader') because there isn't any div with id loader.

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>

Black Background For a Custom Pre Loader on a Website

This is my Preloader Code for my Website
<style>
#site {
opacity: 0;
-webkit-transition: all 2s ease;
transition: all 2s ease;
}
#preloader {
height: 60px;
width: 60px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -20px;
margin-left: -20px;
}
#preloader:before {
content: "";
display: block;
position: absolute;
left: -1px;
top: -1px;
height: 100%;
width: 100%;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
border: 0px solid white;
border-top: 1px solid transparent;
border-radius: 100%;
}
#preloader > .icon {
position: absolute;
/*top: 50%;
left: 50%;*/
height: 60px;
width: 60px;
/*margin-top: -12.5px;
margin-left: -5.3px;*/
-webkit-animation: 1s ease-in-out infinite alternate;
animation: 1s ease-in-out infinite alternate;
}
#media only screen and (min-width: 768px) {
#preloader {
height: 80px;
width: 80px;
margin-left: -30px;
}
#preloader:before {
left: -2px;
top: -2px;
border-top-width: 2px;
border-left-width: 2px;
border-bottom-width: 2px;
border-right-width: 2px;
}
#preloader > .icon {
height: 80px;
width: 80px;
/*margin-top: -18.75px;
margin-left: -7.95px;*/
}
}
#media only screen and (min-width: 1200px) {
#preloader {
height: 100px;
width: 100px;
margin-top: -40px;
margin-left: -40px;
}
#preloader > .icon {
height: 100px;
width: 100px;
/*margin-top: -25px;
margin-left: -10.6px;*/
}
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
#keyframes rotation {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
#-webkit-keyframes wink {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes wink {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
<div id="preloader" aria-busy="true" aria-label="Loading, please wait." role="progressbar"><img class="icon" src="URL OF GIF">
</div>
<main id="site" role="main"></main>
<script type="text/javascript">
(function(){
var preload = document.getElementById("preloader");
var loading = 0;
var id = setInterval(frame, 64);
function frame(){
if(loading == 100){
clearInterval(id);
//window.open('welcome.html', '_self');
} else {
loading = loading + 1;
if(loading == 90){
preload.style.opacity = "0";
}
}
}
})();
/*(function preloader() {
var preloader = document.getElementById("#preloader");
preloader.style.opacity = "0";
preloader.setAttribute("aria-busy", "false");
document.getElementById("#site").style.opacity = "1";
})
window.onload = preloader;*/
</script>
Right now I have a White Background, I would like the Background to be Pure Black. I have tried a few things but nothing seems to work.
I am loading the GIF from a URL.
I know that the color code for Black is #000000 and I have tried entering it instead of the opacity = 0; but nothing seems to work.
Any advice ?

Add this style
html {
height: 100%;
background-color: black;
}

html , body{ height: 100%;}
html {background-color: black;}

Smooth scrolling not working when it should?

So I've been designing a website for my new market garden company. The eCommerce backend is Lemonstand. I simply want to have the arrow button at the bottom of the main image scroll to the anchor (rather than jump). You can view the website here.
I found this code on this website in response to another question:
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
$("#scroll").click(function() {
scrollToAnchor('start');
});
The HTML is:
<div id="home-image-scrollbtn" class="mt-auto"><a id="scroll" href="#start">
<i class="fas fa-arrow-circle-down"></i></a></div>
<section class="container"><a name="start"></a>
I'm loading jquery 3.3.1 from Google's CDN.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I've also tried numerous js scripts. All of them work in theory but don't seem to work on my site. What am I missing?

A small Demo , might help.
// Back to top
var amountScrolled = 300;
$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolled ) {
$(".bck-top").addClass("show");
} else {
$(".bck-top").removeClass("show");
}
});
$(".bck-top").click(function() {
$("html, body").animate({
scrollTop: 0
}, 800);
return false;
});
// Smooth Scroll
$(".nxt-pg").click(function(event){
$("html, body").animate({
scrollTop: $( this ).offset().top
}, 800);
event.preventDefault();
});
.for-height {
background: crimson;
height: 150vh;
}
.bck-top {
position: fixed;
right: -75px;
bottom: 35px;
background: #0e4d67;
width: 50px;
height: 50px;
border-radius: 50%;
opacity: 0;
-webkit-transform: rotate(315deg);
-ms-transform: rotate(315deg);
transform: rotate(315deg);
transition: all .6s cubic-bezier(0.56, 0.07, 0.35, 1.99);
cursor: pointer;
z-index: 555;
}
.bck-top.show {
right: 35px;
border-radius: 0 50% 50% 50%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background: #797bed;
opacity: 1;
transition-property: right, transform, border-radius;
transition-duration: .6s, .6s, .5s;
transition-timing-function: cubic-bezier(0.56, 0.07, 0.35, 1.99);
transition-delay: 0s, 0s, .5s;
box-shadow: 2px 2px 6px 0px #303030;
}
.bck-top.show:hover {
border-radius: 50%;
transition: all .4s cubic-bezier(0, 2.84, 0, 1.19);
}
.nxt-pg {
position: absolute;
right: 0;
bottom: 20px;
left: 0;
width: 40px;
height: 29px;
margin: 0 auto;
cursor: pointer;
}
.nxt-pg span,.nxt-pg span:before, .nxt-pg span:after {
display: block;
width: 40px;
height: 4px;
border-radius: 35px;
background: #fff;
animation: fadeBottom .8s cubic-bezier(0.56, 0.07, 0.35, 1.99) alternate infinite;
}
.nxt-pg:active span,.nxt-pg:active span:before, .nxt-pg:active span:after {
animation-play-state: paused;
}
.nxt-pg span {
position: relative;
margin: 0 auto;
}
.nxt-pg span:before, .nxt-pg span:after {
content: '';
position: absolute;
right: 0;
left: 0;
margin: 0 auto;
}
.nxt-pg span:before {
top: 12px;
width: 30px;
animation-delay: .15s;
}
.nxt-pg span:after {
top: 24px;
width: 20px;
animation-delay: .2s;
}
#-webkit-keyframes fadeBottom {
0% {
opacity: 0;
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
50% {
opacity: .5;
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
background: #009688;
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
#keyframes fadeBottom {
0% {
opacity: 0;
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
50% {
opacity: .5;
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
background: #787bed;
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="for-height">
<a class="nxt-pg">
<span class="br-top"></span>
Click Me
</a>
</div>
<button type="button" class="bck-top">up</button>

css circle rotation with text inside

Can you guys tell me how to make the hallo text to centre inside the circle?
The circle is not currently working the way it should in IE8 and Firefox.
Does anyone have any ideas / suggestions that could fix this?
I have provided a fiddle
Here is my code below (It is all in my Fiddle above)
CSS
.spinner span em {
border-radius: 999px;
position: absolute;
width: 100%;
height: 100%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.spinner span:first-child em {
left: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-animation-name: rotate-lt;
-webkit-transform-origin: 0 50%;
}
.spinner span:last-child em {
left: -100%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-animation-name: rotate-rt;
-webkit-transform-origin: 100% 50%;
}
HTML
<div class="spinner">
<span><em></em></span>
<span><em></em></span>
hallo
</div>
Any help would be great!

To centre your text, use text-align:center for horizontal alignment, and set line-height:300px (with 300px being equal to the element's height) for vertical alignment.

Check this fiddle, I've placed a wrapper div
HTML
<div class="wrapper">
<div class="spinner">
<span><em></em></span>
<span><em></em></span>
</div>
<div class="text">hallo<div>
</div>
CSS
body {
margin: 50px;
}
.wrapper {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
}
.text {
position: absolute;
top:0px;
width: 300px;
height: 300px;
margin: 0 auto;
z-index:10;
text-align:center;
line-height:300px;
}
.spinner {
position: absolute;
width: 300px;
height: 300px;
background: #aaa;
}
.spinner:after {
position: absolute;
content: "";
width: 80%;
height: 80%;
border-radius: 100%;
background: #fff;
top: 10%;
left: 10%;
}
.spinner span em {
background: #0e728e;
-webkit-animation-duration: 3s;
}
/* No need to edit below this line */
#-webkit-keyframes rotate-rt {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
75% { -webkit-transform: rotate(360deg); }
100% { -webkit-transform: rotate(360deg); }
}
#-webkit-keyframes rotate-lt {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(180deg); }
75% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(360deg); }
}
.spinner {
border-radius: 100%;
position: relative;
}
.spinner span {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
}
.spinner span:first-child {
left: 0;
}
.spinner span:last-child {
left: 50%;
}
.spinner span em {
border-radius: 999px;
position: absolute;
width: 100%;
height: 100%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.spinner span:first-child em {
left: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-animation-name: rotate-lt;
-webkit-transform-origin: 0 50%;
}
.spinner span:last-child em {
left: -100%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-animation-name: rotate-rt;
-webkit-transform-origin: 100% 50%;
}