Transitioning from a spinning Font Awesome icon to a static one: Tips and tricks

I'm looking for a solution to smoothly remove the fa-spin class from an element once a process is finished.

The issue I'm facing is that there is no smooth transition between the icon spinning and stopping.

setTimeout(function() {
  stopSpinner();
}, 2500);

function stopSpinner() {
  $('i').removeClass('fa-spin');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class="fa fa-lg fa-refresh fa-spin"></i>

Is there a way to incorporate a smooth transition so that the change from spinning to non-spinning icon is more fluid?

csscss-transitionsfont-awesome

Answer №1

If you want to pause an animation, use the animation-play-state property.

// CSS
.pause-animation {
  animation-play-state: paused;
}

// jQuery
$("div").addClass("pause-animation");

Answer №2

While you may already be familiar with this technique, utilizing the animationiteration event allows you to track when a specific iteration of an animation has completed, as shown in the example below:

var finished = false;

setTimeout(function() {
  finished = true;
}, 2546);

$('.fa-spin').on('animationiteration', function(event) {
  if (finished) {
    $(event.target).removeClass('fa-spin');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<i class="fa fa-lg fa-refresh fa-spin"></i>

Answer №3

Instead of relying on the .fa-spin class, have you considered implementing a CSS transition?

$('i').addClass('spin');
i {
    transition: all 0.5s ease;
}
.spin {
    transform: rotate(180deg);
    transform-origin: 50% 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-lg fa-refresh"></i>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customizing the size of the selectInput widget in R/Shiny

I'm trying to adjust the size of the selectInput() widget in shiny using selectize.js. I've attempted to tweak various attributes listed on this page (https://github.com/selectize/selectize.js/blob/master/dist/css/selectize.css) but I can't ...

javascriptcssrshiny

Transform the inline style attributes found in the HTML code into CSS styling

After creating a webpage using Bootstrap Studio, I realized that all the style attributes are inline and I want to move them to a separate CSS file. However, I am facing difficulty in doing so as when I add an image using 'background-image:url('i ...

htmlcss

Adjust the SVG to match the dimensions of the label, which may vary in both

How can I efficiently resize and embed SVG images into checkbox labels without using a viewbox attribute? Each SVG varies in height and width, making it challenging to find the best solution. .check__button { display: none; } .check__icon { display ...

htmlcsssvg

Having difficulty inserting an image with style="background-image:url(' ')" in Rails from the database

Hi everyone! I am new to both Rails and Stack Overflow, and I would really appreciate it if someone could guide me here. I am currently working on a test site that resembles a personal blog. It's mainly for showcasing one user's portfolio. In t ...

htmlcssruby-on-rails

I'm puzzled as to why my fixed element is gravitating towards the right side of the entire screen instead of aligning with the right side of its parent element

I have inserted a code snippet that highlights my issue. I am attempting to ensure that the .navigation element remains fixed at the top of the colored divs, however, when using 'right: 0;', the .navigation element seems to shift to the right sid ...

htmlcss

What HTML template is your go-to when starting a new project?

Is this the ultimate solution for creating a basic "Hello World" HTML template? I have been experimenting with this starter code to develop simple websites. Are there any other interesting tags I could incorporate to enhance it further? Usually, I refer ...

jqueryhtmlcsstemplatesbootstrap-4

What is the method for selectively applying a "fade to black" mask to an input field?

For my current project, I need to incorporate a design feature where a "fade to black" mask gradually appears on the left side of an input field once the text content reaches the maximum visible width of the input box. The image below provides a visual re ...

javascripthtmlcss

Resizing popups upon button activation

Hey there! I have a popup with a button that reveals random text containing between 0 to 32 words when clicked. The issue is, the popup keeps resizing based on the length of the text, causing the button to move around. Is there a way I can keep the button ...

javascripthtmlcssgoogle-chrome-extension

Utilizing Fancybox with a polymer paper-card: A step-by-step guide

I have a collection of paper-cards and I am looking for guidance on integrating the fancybox library to display the content of each paper-card. Here is a sample of a paper-card: <paper-card heading="Emmental" image="http://placehold.it/350x150/FF ...

htmlcsspolymerfancybox

Basic Java HTML parser for extracting CSS attributes

Is there a way to parse the style attribute of a basic <font> tag and then convert it back to simple html attributes? For example, if I have this string <font style="font-family:tahoma;font-size:24px;color:#9900CC;">, is it possible to convert ...

javahtmlcssregexparsing

Organize and eliminate items within a vessel

Looking to manipulate a container with span elements by removing two and re-arranging one. I attempted the following approach: $('span.class5').insertBefore('span.class0'); However, this inserted each span.class5 into every repeating ...

javascriptjqueryhtmlcss

Convert a fixed Jquery div to absolute positioning when it reaches the end of the page

I've implemented a Jquery code that adds a fixed class to a div when scrolling down. However, I now want to remove this fixed class when it reaches the bottom of the page and replace it with a new one that includes position:absolute; and margin-bottom ...

jquerycss

jQuery is working perfectly on every single page, with the exception of just one

Check out my code snippet here: http://jsfiddle.net/9cnGC/11/ <div id="callus"> <div class="def">111-1111</div> <div class="num1">222-2222</div> <div class="num2">333-3333</div> <div class="num3">444-4444< ...

javascriptjqueryhtmlcss

Implementing the CSS link tag in the header of a NextJS 13 application for enhanced styling

In my Next 13 application, I'm looking to link directly to a basic CSS file. Unfortunately, adding it to the Head component hasn't yielded any results for me. I've also attempted to create a custom _document within both the app and pages, bu ...

cssnext.jsnext.js13

Displaying an error message within the input field

I recently incorporated the jQuery validate plugin to check a contact form I created, but I'm encountering an issue. My goal is to have the error class display inline with the input field where the error occurred. However, it is only appearing in bloc ...

javascriptjqueryhtmlcss

The element's width set to 100% is not functioning properly when used within a container

Struggling to create a full-width image header but the image always ends up being the width of the container, not 100%. Tried various solutions without success, and the suggested answer here did not solve the issue. Modifying the .container width in custom ...

csshtmltwitter-bootstraptwitter-bootstrap-3

Tips for creating text that wraps around an image in an editor

On my webpage, I am using an editor called Cleditor jquery plugin. The default setting allows me to insert images, but the text does not wrap around it. I attempted using vertical-align:top, but it did not resolve the issue: What CSS property should I ap ...

jquerycsseditorword-wrap

Why using the display:none property does not successfully conceal Struts 2 tags such as <s:textfield>

I am curious as to why the div tag is unable to hide the Struts2 tags. I have set up a div that should be hidden on load, and using onChange, I am triggering jQuery to toggle the visibility of the div tag... <%@ taglib prefix="s" uri="/ ...

jquerycssjspstruts2struts-tags

Utilize Bootstrap to ensure that column size remains consistent at 12 on small devices, while maintaining default behavior on larger devices

I have a component that has the ability to hold any number of elements. My goal is to have the elements stack on top of each other and take up the full width of the container when the screen is small, but revert to the default Bootstrap column behavior on ...

htmlcssbootstrap-4

Troubleshoot: Dropdown menu in Materialize not functioning (menu fails to drop down

I am currently incorporating Materialize to create a dropdown button in my navigation bar. However, I am facing an issue where nothing happens when the button is clicked. Here is a snippet of my code: <head> <meta charset="UTF-8"> <!-- ...

javascripthtmlcssfrontendmaterialize