Loading Indicator

A loading indicator is a visual animation used to convey processing or loading, but does not indicate how long the activity will take to complete.

Download CSS for Cards

Direct Dependencies:

bootstrap.bundle.min.js

root.css

colors.css

typography.css

grid.css

utilites.css

loader.css

Use a loading indicator to proactively communicate that the system is working on the user’s request when the progress isn’t detectable, or if it’s not necessary to indicate how long an activity will take. Animation in the loading indicator consists of a spinner that rotates clockwise indefinitely around the circle ring. Combining text with the animation can optimize visual understanding.

Time for loading animation assigned with attribute data-animation. Starting value is 5 end valus is 30 with step of 5. Size of loader with classes sm md lg. Wrapping element Loading-contaier should be used only if loader should take full page width/height.


				<div class="loader-container"> 

					<svg class="loader md" viewBox="0 0 120 120"> 

					<circle class="circle-background" cx="60" cy="60" r="54" /> 

					<circle class="circle-progress" cx="60" cy="60" r="54" data-animation="10" /> 

					</svg> 

					<div class="loader-text">Loading...</div> 

				</div>