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;}

Need to dynamically set width of an element and ::after [duplicate]

I have an element whose :before style has to be modified based on calculations.
export class Content extends React.Component {
render() {
return (
<div className="ring-base">
<div className="ring-left" style={{/* Change here */}}></div>
<div className="ring-right" style={{/* Change here */}}></div>
<div className="ring-cover">
<div className="ring-text">10%</div>
</div>
</div>
);
}
}
CSS Code:
.ring-base {
position: absolute;
height: 200px;
width: 200px;
border-radius: 50%;
background: red;
transform: rotate(90deg);
overflow:hidden;
}
.ring-cover {
position: absolute;
height: 180px;
width: 180px;
background: #fff;
border-radius: 50%;
top: 5%;
left: 5%;
}
.ring-cover .ring-text {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
font-size: 2em;
display: flex;
justify-content:center;
align-content:center;
flex-direction:column;
transform: rotate(-90deg);
}
.ring-right, .ring-left {
height: 100px;
width: 200px;
overflow: hidden;
position: absolute;
}
.ring-right:before, .ring-left:before {
height: inherit;
width: inherit;
position: absolute;
content: "";
border-radius: 100px 100px 0 0;
background-color: grey;
transform: rotate(0deg);
}
.ring-right {
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
transform: rotateZ(0deg);
}
.ring-left {
transform: rotate(180deg);
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.ring-right:before {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
transform: rotate(0deg);
}
.ring-left:before {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
The ask is to be able to update the transform property for .ring-left:before and .ring-right:before via ReactJS.
If there is a way to not update the :before class and change the CSS to not make use of :before at all, then do suggest that as well.
Js-Fiddle

You can iterate document.styleSheets, set .style of .cssRules where .selectorText matches pseudo selector
let sheets = document.styleSheets;
let selector = "div::before";
let replacementContent = '"after"';
for (let sheet of sheets) {
for (let rule of sheet.cssRules) {
if (rule.selectorText === selector) {
rule.style["content"] = replacementContent;
}
}
}
div:before {
content: "before";
color: red;
font-weight: bold;
text-align: center;
text-shadow: 2px 2px 2px #000;
background: green;
width: 50px;
height: 50px;
display: block;
}
<div></div>

JQuery rotate two side back forth on hover (3D)

I have two side front and back. By default front is displayed, when I hover over it it display the back(ie the other side). The problem is that it returns to front by itself, what i wanted to do is unless I hover over it I want the back side to remain as it is.(Rotate back fort on hover)
Here is a live example:
$(document).ready(function(){
$(".cube").mouseover(function(){
$(".cube").addClass('spin-cube');
});
$(".cube").mouseout(function(){
$(".cube").removeClass('spin-cube');
});
});
.wrap {
width: 100%;
height: 300px;
padding-top:50px;
clear: both;
perspective: 800px;
perspective-origin: 50% 100px;
}
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
margin: 0 auto;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background-color: #FFC250;
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.front {
background-color: #360;
z-index: 1000;
transform: translateZ(100px);
}
#keyframes spin {
from { transform: rotateY(0); }
to { transform: rotateY(90deg); }
}
.spin-cube {
animation: spin 2s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="cube">
<div class="front">front</div>
<div class="left">left</div>
</div>
</div>

This solves the problem
$(".cube").mouseover(function(){
if($(".cube").hasClass("spin-cube-front")){
$(".cube").addClass('spin-cube-back');
$(".cube").removeClass('spin-cube-front');
}else{
$(".cube").removeClass('spin-cube-back');
$(".cube").addClass('spin-cube-front');
}
});

$(document).ready(function(){
$(".cube").mouseover(function(){
$(".cube").addClass('spin-cube');
});
$(".cube").mouseout(function(){
$(".cube").removeClass('spin-cube');
});
});
.wrap {
width: 100%;
height: 300px;
padding-top:50px;
clear: both;
perspective: 800px;
perspective-origin: 50% 100px;
}
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
margin: 0 auto;
transition: transform 1s ease;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background-color: #FFC250;
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.front {
background-color: #360;
z-index: 1000;
transform: translateZ(100px);
}
.spin-cube {
transform: rotateY(90deg);
}

This would be more easily done using a transition instead of an animation. Here is an example:
$(document).ready(function(){
var isClassy = false;
var cooldown = false;
$(".cube").mouseover(function(){
if (cooldown) return;
if (!isClassy) {
$(".cube").addClass('spin-cube');
isClassy = true;
} else {
$(".cube").removeClass('spin-cube');
isClassy = false;
}
cooldown = true;
setTimeout(function() {cooldown = false;}, 500);
});
});
.wrap {
width: 100%;
height: 300px;
padding-top:50px;
clear: both;
perspective: 800px;
perspective-origin: 50% 100px;
}
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
margin: 0 auto;
transition: all 1s ease;
transform: rotateY(0deg);
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background-color: #FFC250;
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.front {
background-color: #360;
z-index: 1000;
transform: translateZ(100px);
}
.spin-cube {
transform: rotateY(90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="cube">
<div class="front">front</div>
<div class="left">left</div>
</div>
</div>