Submit button with spinner animation

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.

• Animations of a spinning object are often used as a hint to the user that something is "working".
• I would prefer progress indicators but often the calling duration is not predictable or only has a long duration in case of network packet drops.
• Disabling the button or link as soon as possible is often implemented to prevent double clicking and preventing calling the backend service twice by accident.
• AJAX calls must have a timeout because the user is not willing to wait > 8 secs. even if the network will do retries. This involves some the tricky parts on the server as well and is beyond this text and implementation here.

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.

Click-me

How it works

This button has 3 states implemented by pure CSS:

• default - The button can be clicked.
• disabled - The button is blocked , cannot be clicked.
• wait - The button shows an animation that something is processing.

Start Disabled Wait

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 Strg+U or Ctrl+U to view the source code.

See also

• https://www.w3docs.com/snippets/css/how-to-create-loading-spinner-with-css.html
• https://blog.logrocket.com/animated-page-loaders-css/

Tags