We Keep Coding

Show loading progress bar till the page load

I want to show loading progress bar till the page load. If the internet might be slow and page take more to load, the progress bar show till the page fully load.
I attempted to add code, but because internet speeds vary, it is inaccurate. Could you please help me with this? I want to add a progress bar that starts at 0% while the page is loading and goes up to 100% after the page is completely loaded, dependent on the page loading speed.
$(window).on('load', function() {
$('#preloader').fadeOut(500);
$('body').removeClass('pre_loader');
});
var width = 100,
perfData = window.performance.timing, // The PerformanceTiming interface represents timing-related performance information for the given page.
EstimatedTime = -(perfData.loadEventEnd - perfData.navigationStart),
time = parseInt((EstimatedTime / 1000) % 60) * 100;
// Loadbar Animation
$(".loadbar").animate({
width: width + "%"
}, time);
// Percentage Increment Animation
function animateValue(id, start, end, duration) {
var range = end - start,
current = start,
increment = end > start ? 1 : -1,
stepTime = Math.abs(Math.floor(duration / range)),
obj = $(id);
var timer = setInterval(function() {
current += increment;
$(obj).text(current + "%");
//obj.innerHTML = current;
if (current == end) {
clearInterval(timer);
}
}, stepTime);
}
// Fading Out Loadbar on Finised
setTimeout(function() {
$('.preloader-wrap').fadeOut(100);
}, time);
<div class="preloader-wrap">
<div class="loader">
<div class="trackbar">
<div class="loadbar">
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Sound like CSS (only) animation would be an option to consider. Inline your progress bar and it's <style> first thing as the page loads. Then remove then and make the body visible again on page load event. You can cheat time if you use some easing function that will never finish.
If you need numbers in your progress bar, then there is an options for that; even by a variable in modern browsers https://css-tricks.com/animating-number-counters/
For example (need to play with the percent values a bit):
<!-- almost first thing on page -->
<style>
.container {
width: 400px;
height: 50px;
position: relative;
border: 1px solid black;
}
.progress {
background: blue;
float: left;
color: white;
width: 100%;
height: 50px;
line-height: 50px;
animation-name: slideInFromLeft;
animation-duration: 30s;
animation-timing-function: cubic-bezier(0, .9, .9, .999);
text-align: center;
}
.percent::before {
content: counter(count);
animation-name: counter;
animation-duration: 30s;
animation-timing-function: cubic-bezier(0, .9, .9, .999);
counter-reset: count 0;
}
#keyframes slideInFromLeft {
0% {
width: 0%;
}
99% {
width: 99%;
}
}
#keyframes counter {
0% {
counter-increment: count 0;
}
10% {
counter-increment: count 50;
}
20% {
counter-increment: count 60;
}
30% {
counter-increment: count 70;
}
40% {
counter-increment: count 80;
}
50% {
counter-increment: count 90;
}
60% {
counter-increment: count 95;
}
70% {
counter-increment: count 98;
}
80% {
counter-increment: count 99;
}
90% {
counter-increment: count 90;
}
100% {
counter-increment: count 100;
}
}
</style>
<div class="container">
<div class="progress">
<span class="percent">%</span>
</div>
</div>

Hover effect doesnot work with Transform: rotateY

Hello I have changed the flip card element from w3schools and added javascript that they will rotate 60px if they are in viewport with that user can understand that there is a textt behind card. It works well on scroll but now I release that hover effekt is not working.Can you please help me?
https://www.w3schools.com/howto/howto_css_flip_card.asp
https://jsfiddle.net/mqbkzLy2/
var x = 0;
$.fn.isInViewport = function() {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
$(window).scroll(function() {
if ($(".flip-card-inner").isInViewport() && x == 0) {
setTimeout(function() {
$(".flip-card-inner").css('transform', 'rotateY(80deg)');
}, 400);
setTimeout(function() {
$(".flip-card-inner").css('transform', 'rotateY(0)');
}, 800);
x++;
console.log(x);
console.log("in");
}
if (!$(".flip-card-inner").isInViewport() && x != 0) {
x = 0;
console.log('No success.');
console.log(x);
console.log("out");
}
});
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:120vh;background-color:yellow;"></div>
<h1>Card Flip with Text</h1>
<h3>Hover over the image below:</h3>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Windows_live_square.JPG" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>

that they will rotate 60px if they are in viewport with that user can understand that there is a textt behind card.
Don't use scroll event listener for this, use Intersection Observer (IO) for this.
IO was designed for such problems. With IO you can react whenever an HTML element intersects with another one (or with the viewport)
Check this page, it shows you how to animate an element once it comes into viewport (scroll all the way down). Of course, you can use any animation you want, this is then handled by CSS. This is just an really visible example.
Short recap on what you have to do to get IO to work:
First you have to create a new observer:
var options = {
rootMargin: '0px',
threshold: 1.0
}
var observer = new IntersectionObserver(callback, options);
Here we define that once your target Element is 100% visible in the viewport (threshold of 1) your callback Function is getting executed. Here you can define another percentage, 0.5 would mean that the function would be executed once your element is 50% visible.
Then you have to define which elements to watch
var target = document.querySelector('.flip-card');
observer.observe(target);
Last you need to specify what should happen once the element is visible in your viewport by defining the callback function:
var callback = function(entries, observer) {
entries.forEach(entry => {
// Each entry describes an intersection change for one observed
// here you animate another element and do whatever you like
});
};
If you need to support older browsers, use the official polyfill from w3c.
If you don't want to trigger the animation again when the elements are scrolled again into view a second time then you can also unobserve an element once it's animated.

requestAnimationFrame is not triggering the function supplied to it

I implemented a infinite loop animation using setInterval. I now like to change the implementation to requestAnimationFrame() so that I will have performance which I am after. For some reasons, requestAnimationFrame() does not call the function supplied to it.
My code looks like this;
var index = 0;
var $btn = $('.btn');
function btnBlinkRun() {
if (index < 2) {
index = index + 1;
} else {
index = 0;
}
$('#ani--scaleinout').removeAttr('id');
$($btn[index]).attr('id', 'ani--scaleinout');
window.requestAnimationFrame(btnBlinkRun);
}
btnBlinkRun();
.btn{
width: 30px;
height: 30px;
background: blue;
border-radius: 100%;
margin-bottom: 10px;
}
#ani--scaleinout {
animation: zoominout 1s ease-in;
}
#keyframes zoominout {
50% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="btn" id="ani--scaleinout"></div>
<div class="btn"></div>
<div class="btn"></div>
</div>

It looks like what's going on is you are firing requestAnimationFrame multiple times per second. Your css animation has a duration of 1s. But you are removing the attribute every x ms.
It is triggering, it's just happening so fast you can't see it. To demonstrate change your call to window.requestAnimationFrame to use a setTimeout and you'll notice the animation:
setTimeout(function() {
window.requestAnimationFrame(btnBlinkRun);
}, 1000);
Not saying this is a preferred solution, but explaining why this is happening.

It executes alright. But it does not do what you want it to, i presume.
Animation frame fires on every single rending frame (e.g. 60fps) and not on CSS animation keyframes.
The animationend event is your friend here.
var index = 0;
var buttons = document.querySelectorAll('.btn');
function btnBlinkRun() {
if (index < 2) {
index = index + 1;
} else {
index = 0;
}
const element = document.querySelector('#ani--scaleinout');
element.id = null;
buttons[index].id = 'ani--scaleinout';
buttons[index].addEventListener("animationend", btnBlinkRun, { once: true });
}
btnBlinkRun();
.btn{
width: 30px;
height: 30px;
background: blue;
border-radius: 100%;
margin-bottom: 10px;
}
#ani--scaleinout {
animation: zoominout 1s ease-in;
}
#keyframes zoominout {
50% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}
<div>
<div class="btn" id="ani--scaleinout"></div>
<div class="btn"></div>
<div class="btn"></div>
</div>

how to give fadeout effect to a page in javascript without using jQuery

.. i tried using the code in which the loading will keep on increasing till 100 until a new page will open..
if(loading==90){
preload.style.animation = "fadeOut 2s ease";
}
but its not working

Use css opacity, 1 is full visible, 0 is hidden and 0.5 is half visible.
document.getElementById("yourId").style.opacity = "0.5";

You can append class to preload element
if (window.addEventListener) {
window.addEventListener('load', cool, false);
}
function cool() {
var preload = document.getElementById("preload");
var loading = 0;
var id = setInterval(frame,64);
function frame() {
if(loading == 100) {
clearInterval(id);
// window.open("test1.html","_self");
}
if(++loading == 90){
preload.className = "ld";
}
}
};
#preload {
position: absolute;
display: block;
left: 0;
top: 0;
background: tomato;
width: 100%;
height: 200px;
transition: all 2s ease;
}
.ld {
opacity: 0;
}
<div id="preload"></div>
test string

How to animate cloned element?

What i want to do is looped horizontaly text slider.
My attempt - when end of text is displayed, clone this element move to right end and play animation for cloned element again - but i can't achieve that because for some reason cloned element don't want to animate.
This is chrome only app
Here is jsfiddle.
CSS
#elm {
width: 100px;
height:20px;
overflow: auto;
overflow-y: hidden;
position:absolute;
top:10px;
left:10px;
}
#elm::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
#elm .inner-elm {
position:absolute;
white-space: nowrap;
}
HTML
<div id="elm">
<div class="inner-elm"> 11111111 2222222 333333 4444444</div>
</div>
JS
var elm_right = $('#elm').offset().left + $('#elm').outerWidth();
var settings = {
duration: 5000,
easing: 'linear',
step: function() {
var this_right = $(this).offset().left + $(this).outerWidth();
// make some clone
if(!$(this).hasClass('cloned') && ((this_right + 50) < elm_right)) {
$(this).addClass('cloned');
var clone = $(this).clone(true);
clone.addClass('cloned')
.css('left', $('#elm').width())
.appendTo('#elm')
.animate({right:100}, settings);
}
// remove parent
if( (this_right - 20) < $('#elm').offset().left) {
$(this).remove();
}
}
};
var that = $('#elm .inner-elm');
that.animate({right: that.outerWidth()}, settings);

You could use CSS3 transitions for a simple animation like this. fiddle
var interval = 2000;
var nextTimeout = 200;
var wrapper = $('#elm');
var elem = $('.inner-elm', wrapper);
elem.addClass('move');
setInterval(function(){
var clone = elem.clone(true);
elem.remove();
elem = clone;
elem.removeClass('move');
wrapper.append(elem);
setTimeout(function(){
elem.addClass('move');
}, nextTimeout);
}, interval);
#elm {
height:20px;
overflow: auto;
overflow-y: hidden;
position:absolute;
top:10px;
left:10px;
}
.inner-elm{
transition: all 2s linear;
-ms-transform: translate(110%, 0); /* IE 9 */
-webkit-transform: translate(110%x, 0); /* Safari */
transform: translate(110%, 0);
}
.move{
-ms-transform: translate(-130%, 0); /* IE 9 */
-webkit-transform: translate(-130%, 0); /* Safari */
transform: translate(-130%, 0);
}
#elm::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
#elm .inner-elm {
position:relative;
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="elm">
<div class="inner-elm">Stackoverflow</div>
</div>