Show a loading spinner with a smooth transition effect

After incorporating a loading circle template, I noticed that the circle abruptly appears when the submit button is clicked. I want to achieve a smoother transition for this loading circle. I attempted to use transitions, but it didn't have the desired effect.

const submitButton = document.querySelector('#submit-button')
const load = document.querySelector('#load')

load.style.display = 'none'

submitButton.addEventListener('click', () => {
      load.style.display = 'inline-block'

      setTimeout(() => { load.style.display = 'none'}, 3000)
})
.button {
      padding: 10px 13px;
      
      color: white;
      background-color: transparent;
      transition: 0.1s;

      border: 1px solid #fff;
      border-radius: 5px;

      cursor: pointer;
}

Answer №1

display property cannot be animated, as recommended by Michael G you can utilize a transition on the opacity property instead. A more scalable approach is to apply a class to the element and use css for managing style updates, especially if there are potential future style modifications to be made.

const submitButton = document.querySelector('#submit-button')
const load = document.querySelector('#load')


submitButton.addEventListener('click', () => {
  load.classList.add("active");
  
  setTimeout(() => {
    load.classList.remove("active");
  }, 3000)
})
body {
  background-color: #313038;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.button {
  padding: 10px 13px;
  color: white;
  background-color: transparent;
  transition: 0.1s;
  border: 1px solid #fff;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: #fff;
  transition: 0.1s;
  color: black;
}

.lds-roller {
  display: inline-block;
  transition: 0.5s linear;
  margin-top: 100px;
  width: 80px;
  height: 80px;
  opacity: 0;
}
.lds-roller.active {
  opacity: 1;
}

.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}

.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  margin: -4px 0 0 -4px;
}

/* The rest of the CSS styles remain unchanged */

@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button type='submit' class='button' id='submit-button'>Submit</button>


  <div id='load' class="lds-roller">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JQuery is failing to parse JSON data

I've written a script to fetch data and display it in an HTML table. Here is the script: $('#search_filter_button').click(function (e) { e.preventDefault(); // Prevent form submission var county = $('#filter_county').val() ...

Modify a particular entry that is being looped through in PHP

Currently, I have coded the following: <div class="row"> <div class="col-lg-12"> <table id="usertable" class="table table-bordered table-hover text-center"> <thead> <th class="col-lg-1 text-center">User ID</th> ...

What steps should I take to repair the footer on this webpage?

Working on a footer using bootstrap and it's looking great, but I encountered an issue with blank space appearing at a specific resolution (see image below). Bootstrap Footer: https://i.sstatic.net/XifQe.png My Footer Design: <footer> < ...

Tips for optimizing the placement of div elements for top advertisements on Amazon's website

I'm looking to overlay some divs on top of Amazon.com ads, similar to the image above. This is part of a personal project where I need to position these divs precisely over the ads. To achieve this effect, I've been using getBoundingClientRect t ...

What is the best way to design bootstrap-style menus in React using TailwindCSS or styled-components?

As I dive into learning React, I find myself torn between using TailwindCSS and styled-components. While I am attracted to the simplicity of styled-components, I am hesitant about the lack of pre-built features that TailwindCSS offers, especially in terms ...

The jQuery find and replace feature is causing my entire content to be replaced instead of just specific paragraphs

Within this section, there are multiple paragraphs and an input field. The concept is simple: the user inputs text into the box, then hits "ENTER" to trigger a jquery function below. The process involves identifying matches between the paragraph content a ...

Error: Unable to define $scope function in Angular and Jasmine integration

I am currently working with a controller var videoApp = angular.module('videoApp', ['videoAppFilters', 'ui.unique', 'angularUtils.directives.dirPagination']); videoApp.controller('VideoCtrl', function ($sc ...

Ensuring Valid Submission: Utilizing Jquery for a Straightforward Form Submission with 'Alajax'

After searching for a straightforward JQuery plugin to streamline the process of submitting forms via Ajax, I stumbled upon Alajax. I found it quite useful as it seamlessly integrates into standard HTML forms and handles all the necessary tasks. However, I ...

Integrate geographic data in GeoJSON format into a Leaflet map by using the Django template

In my Django view, I am fetching results of an SQL query and rendering it on the index.html page of my web map. The POST request successfully returns the acreage calculated from the SQL query to the page. I am also attempting to display the geojson data fr ...

`How can I incorporate personalized animations on Google Map V3 Markers as they are individually dropped on the map?`

This is a basic example of dropping markers one by one on Google Maps V3. I have implemented the drop animation when adding markers to the map. However, I am interested in customizing the drop with a fade animation. Is it possible using JavaScript or any ...

What is the best way to split an array into four columns and allocate 10 <li> items from the array to each column?

If I have a dynamic array with 40 elements that changes on every render, how can I loop through the array and return 4 groups of elements, each containing 10 items without any repetition? I want to style these objects in the array using a parent flex con ...

What could be causing AngularJS to truncate my URL in the search bar?

Currently, I am in the process of setting up a state provider for a CRUD website. One issue I encountered is that when I navigate to www.mysite.com/posts/mypost, the URL gets shortened to www.mysite.com/mypost and does not trigger the controller as intend ...

Identifying if a variable is redirecting

Dealing with React Router Dom V6 I am facing an issue with two loader functions that make server requests. async function fetchUserDetails(userId, userAction) { const token = getAuthToken(); const userData = await axios({ url: API.endpoint + &apos ...

Vuetify input with appended button showing loader malfunction

One of the fields in my form is an email input with complex validation rules. I'm using Vuelidate for form validation, and once the user enters a valid email, I want to display a 'Check' button to verify if the user exists. While the server ...

Ways to evaluate two sentences based solely on the spacing in their dynamic sections

I am tasked with comparing two sentences. The first sentence is stored in a database and looks like this: var text1 = "Dear {#dynamic#} {#dynamic#} Welcome to MAX private ltd" The second sentence, which comes from the customer, is as follows: &q ...

Stop unauthorized direct access to PHP forms and only allow submission through AJAX requests

I have set up a script that sends an email notification whenever someone comments on my Facebook comment box. The script uses FB.event.subscribe to trigger an AJAX call to mail.php on my server, which then sends an email to my address. How can I enhance ...

Using Jquery to create an array containing all the items in the pager

192.168.1.1/home?page=1, 192.168.1.1/home?page=2, 192.168.1.1/home?page=3. Is there a way to create an array of only the new items on the pager? I am interested in storing only the elements with the class item-new into the array. To clarify further: I n ...

Ways to create intersecting borders at the corners of a division

Is there a technique to expand the borders of a div by 1 or 2 pixels in each direction so that they create a cross at each corner? https://i.stack.imgur.com/mUAxM.png ...

Styling with CSS: Enhancing list items with separators

Is there a way to include a separator image in my list using CSS? li { list-style: none; background-image: url("SlicingImage/button_unselect.png"); height: 53px; width: 180px; } This is the code for the separator image: url("SlicingImage ...

How can I modify the custom CSS to adjust the color of a Font Awesome icon?

Hello everyone! I am new to coding and I have a question for the Stack Overflow community. I am trying to customize the color of my Font Awesome icons on the homepage of my WordPress theme (Arcade Pro) using the custom CSS editor. Can anyone provide me w ...