Ways to Loop the Animation Endlessly for a Loading Spinner

Question

Ways to Loop the Animation Endlessly for a Loading Spinner

Looking to animate a line infinitely on my website, here is the code snippet:

<body>
    <div class="line_1"></div>
    <div class="line_2"></div>
    <div class="line_3"></div>
</body>

The CSS applied for styling the lines:

body {
padding:50px;
}

.line_1 {
position:relative;
width:50px;
height:5px;
opacity:0.3;
background-color:#ef4646;
transform:rotate(-45deg);
transform-origin:left;
top: -10px;
left: 10px;
}

.line_2 {
position:relative;
width:50px;
height:5px;
opacity:0.3;
background-color:#86b4fc;
transform:rotate(45deg);
transform-origin:left;
top: 10px;
left: 10px;
}

.line_3 {
position:relative;
top:60px;
left: -40px;
width:50px;
height:5px;
opacity:0.3;
background-color:#f7e551;
transform:rotate(-45deg);
transform-origin:right;

The script used for animation:

<script type="text/javascript">
        $(document).ready(function () {
            $('.line_1').animate({ opacity:"1",left:"0px",top:"0px" });
            setInterval(function () { $('.line_2').animate({ opacity: "1", left: "0px", top: "0px" }); },400);
            setInterval(function () { $('.line_3').animate({ opacity: "1", left: "-10px", top: "30px" }); }, 600);

        });
    </script>

The current issue is that the animation only plays once when the page loads. Any suggestions on how to make it repeat continuously would be greatly appreciated. Thank you!

javascript jquery css

Answer 1

Answer №1

One way to streamline this code is by encapsulating it within a function and utilizing jQuery's animate method along with callbacks. To ensure a smooth transition, removing any inline styles is essential, achieved by eliminating the style attribute from the elements. Additionally, introducing a delay using jQuery's delay method allows for animation timing control.

The CSS has also been optimized by consolidating common attributes into shared rules, simplifying maintenance.

function RunAnimation(){
  $('.line_1').removeAttr("style").animate({ 
    opacity:"1",
    left:"0px",
    top:"0px" 
  });
  $('.line_2').removeAttr("style").delay(400).animate({ 
    opacity: "1", 
    left: "0px", 
    top: "0px"
  });
  $('.line_3').removeAttr("style").delay(600).animate({ 
    opacity: "1", 
    left: "-10px", 
    top: "30px" 
  }, RunAnimation);
}
$(document).ready(RunAnimation);

body {
  padding:50px;
}

.line_1, .line_2, .line_3 {
  position: relative;
  width: 50px;
  height: 5px;
  opacity: 0.3;
  transform-origin:left;
}

.line_1 {
  background-color: #ef4646;
  transform: rotate(-45deg);
  top: -10px;
  left: 10px;
}

.line_2 {
  background-color: #86b4fc;
  transform: rotate(45deg);
  top: 10px;
  left: 10px;
}

.line_3 {
  top: 60px;
  left: -40px;
  background-color: #f7e551;
  transform: rotate(-45deg);
  transform-origin: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
    <div class="line_1"></div>
    <div class="line_2"></div>
    <div class="line_3"></div>
</body>

Answer 2

One way to streamline this code is by encapsulating it within a function and utilizing jQuery's animate method along with callbacks. To ensure a smooth transition, removing any inline styles is essential, achieved by eliminating the style attribute from the elements. Additionally, introducing a delay using jQuery's delay method allows for animation timing control.

The CSS has also been optimized by consolidating common attributes into shared rules, simplifying maintenance.

function RunAnimation(){
  $('.line_1').removeAttr("style").animate({ 
    opacity:"1",
    left:"0px",
    top:"0px" 
  });
  $('.line_2').removeAttr("style").delay(400).animate({ 
    opacity: "1", 
    left: "0px", 
    top: "0px"
  });
  $('.line_3').removeAttr("style").delay(600).animate({ 
    opacity: "1", 
    left: "-10px", 
    top: "30px" 
  }, RunAnimation);
}
$(document).ready(RunAnimation);

body {
  padding:50px;
}

.line_1, .line_2, .line_3 {
  position: relative;
  width: 50px;
  height: 5px;
  opacity: 0.3;
  transform-origin:left;
}

.line_1 {
  background-color: #ef4646;
  transform: rotate(-45deg);
  top: -10px;
  left: 10px;
}

.line_2 {
  background-color: #86b4fc;
  transform: rotate(45deg);
  top: 10px;
  left: 10px;
}

.line_3 {
  top: 60px;
  left: -40px;
  background-color: #f7e551;
  transform: rotate(-45deg);
  transform-origin: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
    <div class="line_1"></div>
    <div class="line_2"></div>
    <div class="line_3"></div>
</body>

Answer 3

Answer №2

--edited--

Utilizing CSS can be a more efficient approach than using jQuery in my opinion. I have implemented keyframes to enable animation, and setting

animation-iteration-count: infinite;

ensures the animation runs continuously. If you wish to adjust the speed, simply edit the animation-duration to your desired timeframe.

body {
  padding:50px;
}

.line_1, .line_2, .line_3 {
  position: relative;
  width: 50px;
  height: 5px;
  opacity: 0.3;
  transform-origin:left;
}

.line_1 {
  background-color: #ef4646;
  transform: rotate(-45deg);
  top: -10px;
  left: 10px;
animation-name: line-1;
-webkit-animation-name: line-1;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}

@keyframes line-1 {
  0%   {opacity:0.3; }
  30%  {opacity:0.3; left: 10px; top: -10px;}
  50%  {opacity:1; left: 0; top: 0;}
  100% {opacity:1; left: 0; top: 0;}
}

@-webkit-keyframes line-1 {
  0%   {opacity:0.3; }
  30%  {opacity:0.3; left: 10px; top: -10px;}
  50%  {opacity:1; left: 0; top: 0;}
  100% {opacity:1; left: 0; top: 0;}
} 

.line_2 {
  background-color: #86b4fc;
  transform: rotate(45deg);
  top: 10px;
  left: 10px;
animation-name: line-2;
-webkit-animation-name: line-2;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}

@keyframes line-2 {
  0%   {opacity:0.3; }
  40%  {opacity:0.3; left: 10px; top: 10px;}
  60%  {opacity:1; left: 0; top: 0;}
  100% {opacity:1; left: 0; top: 0;}
}

@-webkit-keyframes line-2 {
  0%   {opacity:0.3; }
  40%  {opacity:0.3; left: 10px; top: 10px;}
  60%  {opacity:1; left: 0; top: 0;}
  100% {opacity:1; left: 0; top: 0;}
}

.line_3 {
  top: 60px;
  left: -40px;
  background-color: #f7e551;
  transform: rotate(-45deg);
  transform-origin: right;
animation-name: line-3;
-webkit-animation-name: line-3;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}

@keyframes line-3 {
  0%   {opacity:0.3; }
  50%  {opacity:0.3; left: -40px; top: 60px;}
  70%  {opacity:1; left: -10px; top: 30px;}
  100% {opacity:1; left: -10px; top: 30px;}
}

@-webkit-keyframes line-3 {
  0%   {opacity:0.3; }
  50%  {opacity:0.3; left: -40px; top: 60px;}
  70%  {opacity:1; left: -10px; top: 30px;}
  100% {opacity:1; left: -10px; top: 30px;}
}

<div class="line_1"></div>
<div class="line_2"></div>
<div class="line_3"></div>

Answer 4

--edited--

Utilizing CSS can be a more efficient approach than using jQuery in my opinion. I have implemented keyframes to enable animation, and setting

animation-iteration-count: infinite;

ensures the animation runs continuously. If you wish to adjust the speed, simply edit the animation-duration to your desired timeframe.

body {
  padding:50px;
}

.line_1, .line_2, .line_3 {
  position: relative;
  width: 50px;
  height: 5px;
  opacity: 0.3;
  transform-origin:left;
}

.line_1 {
  background-color: #ef4646;
  transform: rotate(-45deg);
  top: -10px;
  left: 10px;
animation-name: line-1;
-webkit-animation-name: line-1;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}

@keyframes line-1 {
  0%   {opacity:0.3; }
  30%  {opacity:0.3; left: 10px; top: -10px;}
  50%  {opacity:1; left: 0; top: 0;}
  100% {opacity:1; left: 0; top: 0;}
}

@-webkit-keyframes line-1 {
  0%   {opacity:0.3; }
  30%  {opacity:0.3; left: 10px; top: -10px;}
  50%  {opacity:1; left: 0; top: 0;}
  100% {opacity:1; left: 0; top: 0;}
} 

.line_2 {
  background-color: #86b4fc;
  transform: rotate(45deg);
  top: 10px;
  left: 10px;
animation-name: line-2;
-webkit-animation-name: line-2;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}

@keyframes line-2 {
  0%   {opacity:0.3; }
  40%  {opacity:0.3; left: 10px; top: 10px;}
  60%  {opacity:1; left: 0; top: 0;}
  100% {opacity:1; left: 0; top: 0;}
}

@-webkit-keyframes line-2 {
  0%   {opacity:0.3; }
  40%  {opacity:0.3; left: 10px; top: 10px;}
  60%  {opacity:1; left: 0; top: 0;}
  100% {opacity:1; left: 0; top: 0;}
}

.line_3 {
  top: 60px;
  left: -40px;
  background-color: #f7e551;
  transform: rotate(-45deg);
  transform-origin: right;
animation-name: line-3;
-webkit-animation-name: line-3;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}

@keyframes line-3 {
  0%   {opacity:0.3; }
  50%  {opacity:0.3; left: -40px; top: 60px;}
  70%  {opacity:1; left: -10px; top: 30px;}
  100% {opacity:1; left: -10px; top: 30px;}
}

@-webkit-keyframes line-3 {
  0%   {opacity:0.3; }
  50%  {opacity:0.3; left: -40px; top: 60px;}
  70%  {opacity:1; left: -10px; top: 30px;}
  100% {opacity:1; left: -10px; top: 30px;}
}

<div class="line_1"></div>
<div class="line_2"></div>
<div class="line_3"></div>

Answer 5

Answer №3

If you're looking for a solution, my recommendation is to encapsulate all the code within a function and then invoke it at regular intervals.

Here is an example of how you can achieve this:

$(document).ready(function() {
  function startAnimation() {
    $('.line_1').animate({
      opacity: "1",
      left: "0px",
      top: "0px"
    });
    setTimeout(function() {
      $('.line_2').animate({
        opacity: "1",
        left: "0px",
        top: "0px"
      });
    }, 400);
    setTimeout(function() {
      $('.line_3').animate({
        opacity: "1",
        left: "-10px",
        top: "30px"
      });
    }, 600);
    setTimeout(function() {
      $('.line_1, .line_2, .line_3').removeAttr("style");
    }, 1600);

  }
  
  startAnimation();
  setInterval(startAnimation, 1650);
});

body {
  padding: 50px;
}

.line_1 {
  position: relative;
  width: 50px;
  height: 5px;
  opacity: 0.3;
  background-color: #ef4646;
  transform: rotate(-45deg);
  transform-origin: left;
  top: -10px;
  left: 10px;
}

.line_2 {
  position: relative;
  width: 50px;
  height: 5px;
  opacity: 0.3;
  background-color: #86b4fc;
  transform: rotate(45deg);
  transform-origin: left;
  top: 10px;
  left: 10px;
}

.line_3 {
  position: relative;
  top: 60px;
  left: -40px;
  width: 50px;
  height: 5px;
  opacity: 0.3;
  background-color: #f7e551;
  transform: rotate(-45deg);
  transform-origin: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
  <div class="line_1"></div>
  <div class="line_2"></div>
  <div class="line_3"></div>
</body>

Answer 6

If you're looking for a solution, my recommendation is to encapsulate all the code within a function and then invoke it at regular intervals.

Here is an example of how you can achieve this:

$(document).ready(function() {
  function startAnimation() {
    $('.line_1').animate({
      opacity: "1",
      left: "0px",
      top: "0px"
    });
    setTimeout(function() {
      $('.line_2').animate({
        opacity: "1",
        left: "0px",
        top: "0px"
      });
    }, 400);
    setTimeout(function() {
      $('.line_3').animate({
        opacity: "1",
        left: "-10px",
        top: "30px"
      });
    }, 600);
    setTimeout(function() {
      $('.line_1, .line_2, .line_3').removeAttr("style");
    }, 1600);

  }
  
  startAnimation();
  setInterval(startAnimation, 1650);
});

body {
  padding: 50px;
}

.line_1 {
  position: relative;
  width: 50px;
  height: 5px;
  opacity: 0.3;
  background-color: #ef4646;
  transform: rotate(-45deg);
  transform-origin: left;
  top: -10px;
  left: 10px;
}

.line_2 {
  position: relative;
  width: 50px;
  height: 5px;
  opacity: 0.3;
  background-color: #86b4fc;
  transform: rotate(45deg);
  transform-origin: left;
  top: 10px;
  left: 10px;
}

.line_3 {
  position: relative;
  top: 60px;
  left: -40px;
  width: 50px;
  height: 5px;
  opacity: 0.3;
  background-color: #f7e551;
  transform: rotate(-45deg);
  transform-origin: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
  <div class="line_1"></div>
  <div class="line_2"></div>
  <div class="line_3"></div>
</body>

Ways to Loop the Animation Endlessly for a Loading Spinner

Answer №1

Answer №2

Answer №3

Similar questions

What is the process for creating a rollover effect with png images and jquery?

extracting information from a database with the help of ajax and jquery

Update an object within an array in MongoDB, ensuring that only the first object is modified

Troubleshooting: jQuery UI draggable issue on Chrome

Prevent automatic scrolling to the top of the page after submitting a form. Remain at the current position on the

Steps for selecting the data-link of a div using Selenium:

Ways to verify form data for accuracy of responses

Edit in bulk: Execute a JavaScript function to remove a row, then delete based on a specific condition

Maintaining the integrity of Jquery Tab even after refreshing the page is essential

Enhance the <div> with interactive content through dynamic updates on click within the same element

Determine the width of invisible images using JavaScript/jQuery

Updating PHP database with a countdown timer

"The issue with the jQuery form is that it is not functioning as intended. It seems that the ajax

I am facing an issue with the clearTimeout function in my JavaScript code. Can anyone help

Express bodyParser may encounter difficulties in parsing data sent from Internet Explorer

Tips for retrieving input values when they are not available in HTML documents

What is the best way to extract the values associated with keys using a data variable?

Adaptable Semantic UI form design

The integration of the Vue.js jQuery datatable plugin is producing unexpected issues

Increase initial zoom for React Three Fiber OrbitControls to provide a wider view