When clicks in a web applications are used to trigger processes on the backend using service requests from the browser (aka. AJAX calls) some implementation is required to create a solid implementation.
This button has 3 states implemented by pure CSS:
The default state of the button is unchanged. The only noticeable and required CSS attribute is
position:relative to enable positioning the spinner on top of the button in the center.
To disable the button so it cannot be clicked again the
disabled attribute on the button object is
used. This will show the button using in the
This state is activated by applying the
wait class to the button. it is used in combination with the
:disabed CSS rule so the class can be applied permanently.
By the CSS rule
button:disabled.wait the spinner is added using the
It is a rectangular object with border radius 50% to create a circle. 3/4 of the border is actually shown everything else is transparent.
To make it spinning an infinitive animation is added rotating once per 1.5 seconds.
Press + or + to view the source code.