Spinner
Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.
Basic Spinners
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Sizing
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Custom Loader
,%20for%20everyone.%20More%20@%20http://goo.gl/7AJzbL%20--%3e%3csvg%20width='55'%20height='80'%20viewBox='0%200%2055%2080'%20xmlns='http://www.w3.org/2000/svg'%20fill='%235d79d3'%3e%3cg%20transform='matrix(1%200%200%20-1%200%2080)'%3e%3crect%20width='10'%20height='20'%20rx='3'%3e%3canimate%20attributeName='height'%20begin='0s'%20dur='4.3s'%20values='20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20'%20calcMode='linear'%20repeatCount='indefinite'%20/%3e%3c/rect%3e%3crect%20x='15'%20width='10'%20height='80'%20rx='3'%3e%3canimate%20attributeName='height'%20begin='0s'%20dur='2s'%20values='80;55;33;5;75;23;73;33;12;14;60;80'%20calcMode='linear'%20repeatCount='indefinite'%20/%3e%3c/rect%3e%3crect%20x='30'%20width='10'%20height='50'%20rx='3'%3e%3canimate%20attributeName='height'%20begin='0s'%20dur='1.4s'%20values='50;34;78;23;56;23;34;76;80;54;21;50'%20calcMode='linear'%20repeatCount='indefinite'%20/%3e%3c/rect%3e%3crect%20x='45'%20width='10'%20height='30'%20rx='3'%3e%3canimate%20attributeName='height'%20begin='0s'%20dur='2s'%20values='30;45;13;80;56;72;45;76;34;23;67;30'%20calcMode='linear'%20repeatCount='indefinite'%20/%3e%3c/rect%3e%3c/g%3e%3c/svg%3e)
'%3e%3ccircle%20cx='5'%20cy='50'%20r='5'%3e%3canimate%20attributeName='cy'%20begin='0s'%20calcMode='linear'%20dur='2.2s'%20repeatCount='indefinite'%20values='50;5;50;50'/%3e%3canimate%20attributeName='cx'%20begin='0s'%20calcMode='linear'%20dur='2.2s'%20repeatCount='indefinite'%20values='5;27;49;5'/%3e%3c/circle%3e%3ccircle%20cx='27'%20cy='5'%20r='5'%3e%3canimate%20attributeName='cy'%20begin='0s'%20calcMode='linear'%20dur='2.2s'%20from='5'%20repeatCount='indefinite'%20to='5'%20values='5;50;50;5'/%3e%3canimate%20attributeName='cx'%20begin='0s'%20calcMode='linear'%20dur='2.2s'%20from='27'%20repeatCount='indefinite'%20to='27'%20values='27;49;5;27'/%3e%3c/circle%3e%3ccircle%20cx='49'%20cy='50'%20r='5'%3e%3canimate%20attributeName='cy'%20begin='0s'%20calcMode='linear'%20dur='2.2s'%20repeatCount='indefinite'%20values='50;50;5;50'/%3e%3canimate%20attributeName='cx'%20begin='0s'%20calcMode='linear'%20dur='2.2s'%20from='49'%20repeatCount='indefinite'%20to='49'%20values='49;5;27;49'/%3e%3c/circle%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
'%3e%3ccircle%20cx='18'%20cy='18'%20r='18'%20stroke-opacity='.5'/%3e%3cpath%20d='M36%2018c0-9.94-8.06-18-18-18'%3e%3canimateTransform%20attributeName='transform'%20dur='1s'%20from='0%2018%2018'%20repeatCount='indefinite'%20to='360%2018%2018'%20type='rotate'/%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
'%3e%3ccircle%20cx='22'%20cy='22'%20r='6'%20stroke-opacity='0'%3e%3canimate%20attributeName='r'%20begin='1.5s'%20calcMode='linear'%20dur='3s'%20repeatCount='indefinite'%20values='6;22'/%3e%3canimate%20attributeName='stroke-opacity'%20begin='1.5s'%20calcMode='linear'%20dur='3s'%20repeatCount='indefinite'%20values='1;0'/%3e%3canimate%20attributeName='stroke-width'%20begin='1.5s'%20calcMode='linear'%20dur='3s'%20repeatCount='indefinite'%20values='2;0'/%3e%3c/circle%3e%3ccircle%20cx='22'%20cy='22'%20r='6'%20stroke-opacity='0'%3e%3canimate%20attributeName='r'%20begin='3s'%20calcMode='linear'%20dur='3s'%20repeatCount='indefinite'%20values='6;22'/%3e%3canimate%20attributeName='stroke-opacity'%20begin='3s'%20calcMode='linear'%20dur='3s'%20repeatCount='indefinite'%20values='1;0'/%3e%3canimate%20attributeName='stroke-width'%20begin='3s'%20calcMode='linear'%20dur='3s'%20repeatCount='indefinite'%20values='2;0'/%3e%3c/circle%3e%3ccircle%20cx='22'%20cy='22'%20r='8'%3e%3canimate%20attributeName='r'%20begin='0s'%20calcMode='linear'%20dur='1.5s'%20repeatCount='indefinite'%20values='6;1;2;3;4;5;6'/%3e%3c/circle%3e%3c/g%3e%3c/svg%3e)
Spinner Growing
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...