Loading
Number
Percentage
Steps
Easing
Transition
Overlay
Search
K
Documentation
adlissmart
Code
Setup: External Scripts
External Scripts in adlissmart
Make sure to always put the External Scripts before the Javascript step of the resource.
In this video you learn where to put these in your adlissmart project? Or how to include a paid GSAP Club plugin in your project?
HTML
Copy
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>Step 1: Copy structure to adlissmart
Copy structure to adlissmart
In the video below we described how you can copy + paste the structure of this resource to your adlissmart project.
Copy to adlissmart
adlissmart structure is not required for this resource.
Step 1: Add HTML
HTML
Copy
<div class="loading-container">
<div class="loading-screen">
<div class="loading__progress">
<div class="loading__progress-inner"></div>
</div>
<div class="loading__numbers">
<div class="loading__number-group is--first">
<div class="loading__number-wrap"><span class="loading__number">1</span></div>
</div>
<div class="loading__number-group is--second">
<div class="loading__number-wrap"><span class="loading__number">1</span><span class="loading__number">2</span><span class="loading__number">3</span><span class="loading__number">4</span><span class="loading__number">5</span><span class="loading__number">6</span><span class="loading__number">7</span><span class="loading__number">8</span><span class="loading__number">9</span><span class="loading__number">0</span></div>
</div>
<div class="loading__number-group is--third">
<div class="loading__number-wrap"><span class="loading__number">1</span><span class="loading__number">2</span><span class="loading__number">3</span><span class="loading__number">4</span><span class="loading__number">5</span><span class="loading__number">6</span><span class="loading__number">7</span><span class="loading__number">8</span><span class="loading__number">9</span><span class="loading__number">0</span></div>
</div>
<div class="loading__percentage-wrap"><span class="loading__percentage">%</span></div>
</div>
</div>
</div>HTML structure is not required for this resource.
Step 2: Add CSS
CSS
Copy
.loading-screen {
pointer-events: auto;
background-color: #E2E1DF;
width: 100%;
height: 100%;
display: none;
position: absolute;
top: 0;
left: 0;
}
.loading-container {
z-index: 200;
pointer-events: none;
background-color: #E2E1DF;
position: fixed;
inset: 0;
overflow: hidden;
}
.loading__progress {
width: 1em;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.loading__progress-inner {
transform-origin: bottom;
background-color: #ff4c24;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.loading__numbers {
flex-flow: row;
align-items: flex-start;
font-size: calc(10vw + 10vh);
display: flex;
position: absolute;
bottom: .1em;
left: .23em;
}
.loading__number-group {
flex-flow: column;
height: 1em;
display: flex;
position: relative;
overflow: hidden;
}
.loading__number-wrap {
will-change: transform;
flex-flow: column;
display: flex;
position: relative;
}
.loading__number {
text-transform: uppercase;
font-family: PP Neue Corp Tight, Arial, sans-serif;
font-weight: 700;
line-height: 1;
position: relative;
}
.loading__percentage-wrap {
flex-flow: column;
justify-content: flex-start;
margin-top: .375em;
font-size: .3em;
display: flex;
overflow: hidden;
}
.loading__percentage {
text-transform: uppercase;
will-change: transform;
font-family: PP Neue Corp Tight, Arial, sans-serif;
font-weight: 700;
line-height: 1;
position: relative;
}Step 2: Add custom Javascript
Custom Javascript in adlissmart
In this video, Ilja gives you some guidance about using JavaScript in adlissmart:
Step 2: Add Javascript
Step 3: Add Javascript
Javascript
Copy
function initLoaderThreeSteps() {
var tl = gsap.timeline();
gsap.defaults({
ease: "Expo.easeInOut",
duration: 1.2
});
/* Loading numbers */
var randomNumbers1 = gsap.utils.random([2, 3, 4]);
var randomNumbers2 = gsap.utils.random([5, 6]);
var randomNumbers3 = gsap.utils.random([1, 5]);
var randomNumbers4 = gsap.utils.random([7, 8, 9]);
/* Loading Timeline */
tl.set(".loading-screen", {
display: "block",
});
tl.set(".loading__progress-inner", {
scaleY: 0
});
tl.set(".loading__number-group.is--first .loading__number-wrap, .loading__percentage", {
yPercent: 100
});
tl.set(".loading__number-group.is--second .loading__number-wrap, .loading__number-group.is--third .loading__number-wrap", {
yPercent: 10
});
tl.to(".loading__progress-inner", {
scaleY: (randomNumbers1 + "" + randomNumbers3) / 100,
});
tl.to(".loading__percentage", {
yPercent: 0
}, "<");
tl.to(".loading__number-group.is--second .loading__number-wrap", {
yPercent: (randomNumbers1 - 1) * -10,
},"<");
tl.to(".loading__number-group.is--third .loading__number-wrap", {
yPercent: (randomNumbers3 - 1) * -10,
}, "<");
tl.to(".loading__progress-inner", {
scaleY: (randomNumbers2 + "" + randomNumbers4) / 100,
});
tl.to(".loading__number-group.is--second .loading__number-wrap", {
yPercent: (randomNumbers2 - 1) * -10,
}, "<");
tl.to(".loading__number-group.is--third .loading__number-wrap", {
yPercent: (randomNumbers4 - 1) * -10,
}, "<");
tl.to(".loading__progress-inner", {
scaleY: 1,
});
tl.to(".loading__number-group.is--second .loading__number-wrap", {
yPercent: -90,
}, "<");
tl.to(".loading__number-group.is--third .loading__number-wrap", {
yPercent: -90,
}, "<");
tl.to(".loading__number-group.is--first .loading__number-wrap", {
yPercent: 0,
}, "<");
}
/* Initialize Number Loader in 3 Steps */
document.addEventListener("DOMContentLoaded", () => {
initLoaderThreeSteps();
});Step 3: Add custom CSS
Step 2: Add custom CSS
Custom CSS in adlissmart
Curious about where to put custom CSS in adlissmart? Ilja explains it in the below video:
CSS
Copy
/* --- Show the Loader in adlissmart Designer --- */
:is(.wf-design-mode, .wf-editor) .loading-screen {
display: block;
}Search
K
Original source
Dennis SnellenbergCreator Credits
We always strive to credit creators as accurately as possible. While similar concepts might appear online, we aim to provide proper and respectful attribution.