DEV Community

Cover image for CSS Animated Submit Loading
Chris Bongers
Chris Bongers

Posted on • Originally published at


CSS Animated Submit Loading

Today we are going to be working on some amazing UI element, an animated submit loading.

Let's say you have a longer API call or need to verify some data the person inputted in your form.
We will have a button that says "Send", and once clicked, it show a loading animation!

HTML Structure

<div class="container">
  <form id="form">
    <input type="text" />
    <br /><br />
    <button type="submit">
        class="loader loading"
        viewBox="0 0 38 38"
          transform="translate(2 2)"
          <circle class="st0" stroke-opacity=".5" cx="17" cy="17" r="16.5"></circle>
            d="M33.5 17C33.5 7.9 26.1.5 17 .5"
            transform="rotate(249.767 17 17)"
              from="0 17 17"
              to="360 17 17"
Enter fullscreen mode Exit fullscreen mode

The main feature here is in the button.
As you can see we have a default span with the "Send" text in it. Next to that we have included a span with the SVG in it, this is a loading circular element. We then use the animateTransform element to define a basic web animation!

animateTransform is very versatile, but not supported in IE so we will be backing this up with CSS animation as well.

Now we need to start styling these elements.

CSS Animated Submit

button {
  background-color: #0071b2;
  color: #fff;
  border: 0 solid #015494;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 700;
  padding: 0.75em 1em;
  position: relative;
Enter fullscreen mode Exit fullscreen mode

The button is styled very basic; the only important part is the relative position here.

button * {
  transition: opacity 0.3s ease-in;
Enter fullscreen mode Exit fullscreen mode

Then we add an opacity transform on all child elements of the button.

button .loader {
  position: absolute;
  display: block;
  fill: transparent;
  top: calc(50% - 0.75rem);
  left: calc(50% - 0.75rem);
  width: 1.5rem;
  height: 1.5rem;
  animation: rotating 1.5s linear infinite;
  display: none;
  opacity: 0;
Enter fullscreen mode Exit fullscreen mode

Next we define the loader span (the circle) this gets a basic width and height and we add the rotating animation which looks like this:

@-webkit-keyframes rotating {
  0% {
    transform: rotate(0deg);
  to {
    transform: rotate(1turn);
@keyframes rotating {
  0% {
    transform: rotate(0deg);
  to {
    transform: rotate(1turn);
Enter fullscreen mode Exit fullscreen mode

This will make sure as a fallback, the circle is animating.

We will be adding a loading class once the user submits the form, so let's see how that will look in the CSS.

button.loading span {
  color: transparent;
  opacity: 0;
button.loading .loader {
  fill: transparent;
  display: block;
  opacity: 1;
Enter fullscreen mode Exit fullscreen mode

As you can see, once the loading class is added, we make the first span transparent and give the loader an opacity of 1!

JavaScript to Tidy up

The last thing we need to do is actually add the loading class once we submit the form:

var form = document.getElementById('form');

form.addEventListener('submit', function(event) {
  var button = form.querySelector('button');
  button.disabled = true;
Enter fullscreen mode Exit fullscreen mode

We retrieve the form and add a submit listener. Then we make sure the form doesn't actually submit.
Then we get the button inside the form and add a loading class to the ClassList. And disable the button for now.

You can see this in action on this Codepen.

See the Pen CSS Animated Submit Loading by Chris Bongers (@rebelchris) on CodePen.

Alt Text

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (2)

js_bits_bill profile image
JS Bits with Bill

Cool, I hadn't heard of animateTransform before. Are the CSS keyframes added in your example added just as a fallback in case animateTransform isn't supported in the browser?

dailydevtips1 profile image
Chris Bongers

Awesome right?!

I came across it and had to just try it, the keyframe is just another fallback layer yes.
You can remove it in all modern browsers and the animateTransform will work.

Perhaps i'll write more in depth about that, since it surprised me as well.

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git