Submit button with spinner animation


Clicking a button that starts a service call to the background may not be activated more that once until the call has finished and the result is available.

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 is simulating a 3 sec. lasting background call. The only thing the client side scripting needs to do is to set the button to disabled. There is no need to include animated gif files or implement JavaScript for the animation. The mechanism is built using pure CSS - no image, no animated GIF, no SVG tricks.

How it works

This button has 3 states implemented by pure CSS:

Default state

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.

Disabled state

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 :disabled mode.

Wait state

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 ::after selector

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.

See also


CSS JavaScript