CCM Web Design Standards

Processing Animation

There are four different animations for processing animations. Click on each of the buttons below to view them. Each animation will close after three seconds.

Use Case for Progress Indicators:

  • Use a processing animation on all form submits.
  • Text should read: "Submitting Request..."
  • Use a processing animation on page with a lot of data.
  • On a page which takes time to load, text should read: "Loading..."
  • Always use informative text with processing animation. Text examples: "Loading", "Saving", "Submitting Request
  • Fade out background overlay: black at 70% opacity.
  • Text color should be white.

Downloading

Loading

Saving

Submitting