Youtube link - Click here
Loading Effect - Source code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>
Loader Using javascript
</title>
<link href="loader.css" rel="stylesheet">
<script src="loader.js"></script>
</head>
<body>
<div class="container">
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
</div>
</body>
</html>
CSS:
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.items {
width: 20px;
height: 20px;
background-color: violet;
border-radius: 50%;
margin: 5px;
}
JS:
var i = 0;
var j = 0;
var element = document.getElementsByClassName("items");
//first create the blink for one time of all elements
function blink() {
element[i].style.transform = "scale(0.5)";
// for only last element this condition should give
if (i == 0) {
element[element.length - 1].style.transform = "scale(1)";
}
i++;
//make i=0 when i becames 7
if (i == element.length) {
i = 0;
// now by using for loop make the blinking again by setting SCALE(1)
for (j = 0; j < element.length; j++) {
if (j == i - 1) {
element[i - 1].style.transform = "scale(0.5)";
} else {
element[j].style.transform = "scale(1)";
}
i = 0;
element[element.length - 1].style.transform = "scale(0.5)";
}
}
}
//add setInterval
setInterval(blink, 500);
Post a Comment