Here is my code and I'm trying to implement the Shimmer Loading Effect on it. I made the effect and you can see it on the initial render. The thing is I don't know how to use it. the first text content is from my html file and doesnt need an ajax call. But when the button is clicked the request is sent to api and the effect should displays as long as the data from ajax call returns. then it shoud be disappeard again. I got confused totally.
const btn = document.getElementById('jokeBtn');
const text = document.getElementById('text');
const loading = document.getElementById('shimmer');
const url = 'https://icanhazdadjoke.com/';
async function getter() {
const initialPromise = await fetch(url, {
headers: {
Accept: 'application/json',
},
});
const myPromise = await initialPromise.json();
text.innerHTML = myPromise.joke;
loading.style.display = 'none';
}
btn.addEventListener('click', getter);@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap');
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
html {
box-sizing: border-box;
font-size: 62.5%;
font-family: 'Georama', sans-serif;
}
body {
height: 100vh;
justify-content: center;
align-items: center;
display: flex;
color: #fff;
-webkit-font-smoothing: antialiased;
background-color: #000;
display: flex;
flex-direction: column;
}
.sec1 {
height: 500px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.sec2 {
width: 100%;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
p {
font-size: 2rem;
color: #222;
text-align: left;
margin-left: 0.7rem;
margin-top: 1rem;
margin-right: 0.7rem;
}
.jokebtn {
padding: 1rem 1.5rem;
box-shadow: 2px 4px 17px -5px rgba(0, 0, 0, 0.71);
background-color: #ea526f;
border-radius: 20px;
border: 1px solid #e42549;
cursor: pointer;
color: #ffffff;
font-size: 2rem;
text-decoration: none;
text-shadow: 0px 1px 0px #e42549;
}
.text-container {
height: auto;
width: 30vw;
text-align: center;
background-color: #fff;
border-radius: 6px;
box-shadow: 2px 4px 17px -5px rgba(0, 0, 0, 0.71);
}
#text {
margin: 2rem;
}
h2 {
background-color: #555;
font-size: 2rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
color: #fff;
}
.jokebtn:active {
transform: scale(0.98);
}
.jokebtn:hover {
background-color: #e42549;
}
.text-cont {
height: auto;
width: 100%;
}
.btn-cont {
height: 35%;
width: 100%;
}
.animated-bg {
opacity: 0.3;
background-image: linear-gradient(
to right,
#c6c8ca 0%,
#dbdbdd 10%,
#bebebe 20%,
#f3f3f3 1000%
);
background-size: 200% 100%;
animation: bgPos 1s linear infinite;
}
.animated-bg-text {
border-radius: 10px;
display: block;
margin: 0.7rem;
height: 20px;
width: 100px;
}
@keyframes bgPos {
0% {
background-position: 50% 0;
}
100% {
background-position: -150% 0;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<section >
<div >
<div >
<h2>Test</h2>
</div>
<p id="text">
When you walked through the door. It was clear to me (Clear to me).
You’re the one they adore. Who they came to see (Who they came to
</p>
<div id="shimmer">
<span style="width: 100%"
> </span
>
<span style="width: 100%"
> </span
>
<span style="width: 100%"
> </span
>
<span style="width: 50%"
> </span
>
</div>
</div>
</section>
<section >
<button type="submit" id="jokeBtn" >One more!</button>
</section>
<script src="main.js"></script>
</body>
</html>CodePudding user response：
I try to fix, what you mean?
const btn = document.getElementById('jokeBtn');
const text = document.getElementById('text');
const loading = document.getElementById('shimmer');
const url = 'https://icanhazdadjoke.com/';
async function getter() {
text.style.display = 'none';
loading.style.display = 'block';
const initialPromise = await fetch(url, {
headers: {
Accept: 'application/json',
},
});
const myPromise = await initialPromise.json();
text.innerHTML = myPromise.joke;
loading.style.display = 'none';
text.style.display = 'block';
}
loading.style.display = 'none';
btn.addEventListener('click', getter);@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap');
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
html {
box-sizing: border-box;
font-size: 62.5%;
font-family: 'Georama', sans-serif;
}
body {
height: 100vh;
justify-content: center;
align-items: center;
display: flex;
color: #fff;
-webkit-font-smoothing: antialiased;
background-color: #000;
display: flex;
flex-direction: column;
}
.sec1 {
height: 500px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.sec2 {
width: 100%;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
p {
font-size: 2rem;
color: #222;
text-align: left;
margin-left: 0.7rem;
margin-top: 1rem;
margin-right: 0.7rem;
}
.jokebtn {
padding: 1rem 1.5rem;
box-shadow: 2px 4px 17px -5px rgba(0, 0, 0, 0.71);
background-color: #ea526f;
border-radius: 20px;
border: 1px solid #e42549;
cursor: pointer;
color: #ffffff;
font-size: 2rem;
text-decoration: none;
text-shadow: 0px 1px 0px #e42549;
}
.text-container {
height: auto;
width: 30vw;
text-align: center;
background-color: #fff;
border-radius: 6px;
box-shadow: 2px 4px 17px -5px rgba(0, 0, 0, 0.71);
}
#text {
margin: 2rem;
}
h2 {
background-color: #555;
font-size: 2rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
color: #fff;
}
.jokebtn:active {
transform: scale(0.98);
}
.jokebtn:hover {
background-color: #e42549;
}
.text-cont {
height: auto;
width: 100%;
}
.btn-cont {
height: 35%;
width: 100%;
}
.animated-bg {
opacity: 0.3;
background-image: linear-gradient(
to right,
#c6c8ca 0%,
#dbdbdd 10%,
#bebebe 20%,
#f3f3f3 1000%
);
background-size: 200% 100%;
animation: bgPos 1s linear infinite;
}
.animated-bg-text {
border-radius: 10px;
display: block;
margin: 0.7rem;
height: 20px;
width: 100px;
}
@keyframes bgPos {
0% {
background-position: 50% 0;
}
100% {
background-position: -150% 0;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<section >
<div >
<div >
<h2>Test</h2>
</div>
<p id="text">
When you walked through the door. It was clear to me (Clear to me).
You’re the one they adore. Who they came to see (Who they came to
</p>
<div id="shimmer">
<span style="width: 100%"
> </span
>
<span style="width: 100%"
> </span
>
<span style="width: 100%"
> </span
>
<span style="width: 50%"
> </span
>
</div>
</div>
</section>
<section >
<button type="submit" id="jokeBtn" >One more!</button>
</section>
<script src="main.js"></script>
</body>
</html>