Fontawesome icon doesn't rotate when hiding with jquery

Question

We hope this is easy .. I searched, but did not find anything to solve this problem.

I use a simple font-size icon that is hidden when loading a document. Spinner works fine if I don’t avoid it, however, if I applied a hidden class to it, then I use jquery to show that the icon is displayed, but it is no longer animated, it just displays as a static icon.

Is there a better way that I have to hide this element in order for the animation to work?

HERE - CSS FOR ANIMATION ICONS

.icon-spinner { display: none; } .load-animate { -animation: spin .7s infinite linear; -webkit-animation: spin2 .7s infinite linear; } @-webkit-keyframes spin2 { from { -webkit-transform: rotate(0deg);} to { -webkit-transform: rotate(360deg);} } @keyframes spin { from { transform: scale(1) rotate(0deg);} to { transform: scale(1) rotate(360deg);} } 

HERE IS THE TEXT OF THE ICON INSIDE THE BUTTONS OF THE BUTTON

 <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-spinner load-animate icon-spinner"></i> Action</button> 

HERE ARE THE ENVIRONMENT FOR ART IN THE CLASS

 $('.icon-spinner').show(); 

Answer 1

just wrap the icon with a span and add the icon-spinner class to it.

demo fiddle - https://jsfiddle.net/ub4xk013/1/

 <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="icon-spinner"><i class="fa fa-spinner load-animate"></i></span> Action</button> 

hope this helps!

Answer 2

do so. Your font-awesome does not work. This is the case. Serial network scripts (js) and css for your project like this

 $('.icon-spinner').show(); 

 .icon-spinner { display: none; } .load-animate { -animation: spin .7s infinite linear; -webkit-animation: spin2 .7s infinite linear; } @-webkit-keyframes spin2 { from { -webkit-transform: rotate(0deg);} to { -webkit-transform: rotate(360deg);} } @keyframes spin { from { transform: scale(1) rotate(0deg);} to { transform: scale(1) rotate(360deg);} } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"> <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-spinner load-animate icon-spinner"></i> Action</button>