SAP Icons - loading icon - spinner CSS class

[ivijan]

Issue

• Loading icon from [SAP Icons] don't have spinning animation class

Proposal

• Solution similar to font-awesome icons could be introduced:

// Animated Icons classes
.sap-icon-spin {
animation: sap-icon-spin 2s infinite linear;
}

.sap-icon-pulse {
animation: sap-icon-spin 1s infinite steps(8);
}

@Keyframes sap-icon-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

Additional information

Browser and enviroment: Chrome v67.x on Mac High Sierra v10.x

Version of the Fundamental UI: v1.0.0

Front-end framework: Angular 6

[saad-mo]

@ivijan which sap icon are you referring to? her is the list of all the icons - https://sap.github.io/fundamental/components/icon.html

also we already have a loading 'spinner' component which has built-in animation - https://sap.github.io/fundamental/components/loading-spinner.html

[ivijan]

Hi @saadmhybris!
Thanks for reply!

Although, having special loading component is good, I would also suggest enabling possibility to animate icons as the user prefers.

So in case I would like to have my own loading component, I just need to have possibility to rotate icon [sap-icon--refresh] with simple CSS class. Example of solution that font-awesome is using, is in my previous example.

Simple usecase would be:
<i class="sap-icon--refresh sap-icon-spin"></i>