Disable the spinning animation of the Bootstrap spinner to keep it still and static

I am currently utilizing bootstrap 4 for my project. When a particular event starts, I have successfully managed to make the spinner spin with the code snippet below:

<span class='spinner-border spinner-border-sm text-primary' role='status' aria-hidden='true' id='spinner' style='display: none'></span>

document.getElementById('spinner').style.display = 'inline-block';

However, I am facing some difficulty in stopping the spinner animation. I do not want to hide the spinner as I intend to display the static image instead. Is there a way to achieve this without hiding the spinner altogether?

javascripthtmlcssbootstrap-4

Answer №1

Solution

By simply setting the animation property to none, you can easily stop the spinner:

document.getElementById('spinner').style.animation = 'none';

Demo

Check out this code snippet below for a live demonstration. The spinner will come to a halt after running for 2s:

// Get the spinner element
var spinner = document.getElementById('spinner');

// Display the spinner
spinner.style.display = 'inline-block';

// Set a timeout for 2 seconds
setTimeout(function() {
  // Stop the spinner animation
  spinner.style.animation = 'none';
}, 2000);
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="40222f2f34333432213000746e766e72">[email protected]</a>/dist/css/bootstrap.min.css">

<span class='spinner-border spinner-border-sm text-primary' role='status' aria-hidden='true' id='spinner' style='display: none'></span>

<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="513b202434232811627f667f60">[email protected]</a>/dist/jquery.slim.min.js"></script>

<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="33435c434356411d594073021d02051d02">[email protected]</a>/dist/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a6ababb0b7b0b6a5b484f0eaf2eaf6">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

Edits

Edit #1: How to display a full circle

If the spinner is not initially displaying as a full circle, one workaround is to change the class to an icon from FontAwesome when stopping the spinner. Here's how you can achieve that:

First, include the Font Awesome CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

In FontAwesome 6, the circle icon is represented by 

<i class="fa-regular fa-circle"></i>
. So in JavaScript, replace the current className of the spinner with 'fa-regular fa-circle' like so:

document.getElementById('spinner').className = "fa-regular fa-circle";

Demo

In this demo, the spinning will stop after 2s and the icon will be changed (I've used the check icon and added the green color using the text-success class - feel free to customize as needed).

Edit #2: A More Effective Approach to Handling Animations

@Yogi suggested another solution in the comments which may be more advanced, but considering the original intention was to change the icon at the end of the spin rather than restart the animation, the earlier method suffices. However, if restarting the animation is desired, you can also utilize 

spinner.style.animationIterationCount
where setting it to 0 stops and setting it to Infinite restarts the animation.

Answer №2

If you want the animation to come to a halt, all you have to do is adjust the iteration count to 0

document.getElementById("spinner").style.animationIterationCount = 0

To resume the animation, simply revert it back to its initial setting

document.getElementById("spinner").style.animationIterationCount = 'Infinite'

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

The testing for React and TypeScript did not succeed. It is recommended to utilize the "jsdom" test environment for better results

I'm working on a basic React/TypeScript project and diving into the world of testing. I've opted for React Testing Library and Jest to test a straightforward product page that should display the message "Welcome to our product page." Unfortunate ...

javascriptreactjstypescripttestingjestjs

There seems to be an issue with accessing the / endpoint in node

https://i.sstatic.net/ROGhJ.png index.js const path = require("path"); const express = require("express"); const exp = require("constants"); const dotenv = require("dotenv").config(); const port = process.env.PORT || 5001; const app = express(); //enabl ...

javascriptnode.js

Using React-router and an Express server on the same port

Currently, I am in the process of building a website that utilizes react and react-router for the frontend, along with express for the server side. In order to establish session based authentication, I have incorporated express-session. However, the only m ...

javascriptnode.jsreactjsexpressreact-router

Issues with proper execution of jquery ajax error functionORJquery

I have encountered an issue while attempting to load an external JSON file using $.ajax(). For some reason, my error function only executes a console.log or an alert message, but nothing else. In my scenario, if the JSON file is successfully found, the scr ...

javascriptjqueryajaxjson

Using JavaScript to open a document file in Chrome at launch

Is it possible to automatically open a doc file stored on my C:// drive when a link is clicked on my HTML page? Here is the code I have been using: <a href="C://mytestfile.doc">Click Me To launch the DOC FILE</a> Unfortunately, instead of op ...

javascripthtmlgoogle-chrome

IE9 fails to display li::before element correctly

I have created a utility navigation bar using an unordered list and I am attempting to use li::before to add a pipe "|" symbol between each link in the navigation. Below is my utility navigation... <div class="horizontalnavlinks"> <ul> ...

htmlcsspseudo-elementcss-content

What is the best way to structure files within the css and js folders after running the build command in Vue-cli?

Vue-cli typically generates files in the following structure: - dist -- demo.html -- style.css -- file.commom.js -- file.commom.js.map -- file.umd.js -- file.umd.js.map -- file.umd.min.js -- file.umd.min.js.map However, I prefer to organize them this way: ...

javascriptvue.jsvue-cli-4

There is a property name missing before the colon in the "(property) : (value)" declaration for a CSS global variable

I have been trying to create a global variable in CSS by following the suggestions I found online. According to various sources, including this article, the correct way to declare a CSS variable is as follows: :root{ --variableName:property; } However, ...

cssasp.net

Linking query branches without encountering the "Exceeded the number of hooks rendered during the previous render" error

This apollo client utilizes a rest link to interact with 2 APIs. The first API returns the value and ID of a record, while the second API provides additional information about the same record. I combine this information to render the content without using ...

javascriptreactjsapolloreact-apollo

What is the best way to render geoJSON as a mesh instead of a line in three.js, and apply a color fill to it?

Currently working on a three.js globe project that involves adding data layers using geoJSON. The initial layer, representing countries, is displayed as lines thanks to ThreeGeoJSON. https://i.sstatic.net/nuBkR.png However, I am aiming to go beyond just ...

javascriptthree.jsgeojson

Is there a way to remove the grey overlay when clicking on an <a> tag?

I want to develop a Hybrid app. On a webpage, I have buttons displayed in the following format: <a href="#"> <div style = "height: 50px; width: 50px; background-color: #00ff00; margin: 32px"></div> </a> Whenever I tap and hold ...

htmlcssprogressive-web-appshybrid

Adjusting the view of an OpenLayers3 map to encompass various vector layers

My OpenLayers3 map includes an OSM Tile layer and one or more Vector layers. I have a function that allows me to zoom into a single layer successfully: vector.addEventListener("change", function() { map.getView().fitExtent(vectorSource.getExtent(), ma ...

javascriptopenlayers-3

Innovative idea for a time management system based on timelines and scheduling

My latest project involves creating a scrollable scheduler, inspired by vis-timeline and built using Vue.js. One of the main challenges I'm facing is achieving smooth infinite scrolling in all directions (past and future). I must confess that I&apo ...

javascriptvue.jsscrollschedulerconceptual

What are some strategies for boosting the efficiency of a recursive element in React?

Within my React Native Expo project, I've implemented a recursive comment component to facilitate the rendering of nested comment threads. However, as the number of comments grows, performance begins to suffer, resulting in a less-than-ideal user exp ...

javascriptreactjsreact-native

Exploring the concept of try-catch in JavaScript with a focus on the call stack within the Node

Recently, I delved into the world of Javascript and decided to explore how stack tracing functions in nodejs. Instead of looking at the source code, my lazy side led me to consult the language reference found at https://www.ecma-international.org/ecma-262/ ...

javascriptnode.jstry-catchread-eval-print-loop

Steps for creating an AJAX request to a variable defined within the local scope

I want to create a list using a JSON object that I already have stored in a variable. I have been exploring the dynatable library and its documentation on populating a table using AJAX to receive JSON data. However, I am stuck on how to make it work with ...

javascriptjqueryajaxjsondynatable

What is the best way to create an AngularJS page with a direct link that will dynamically affect the content on the

I have a webpage similar to Google search where the backend generates a list of items. The page features an HTML form with multiple fields for users to modify values, resulting in a refreshed list of items from the backend. Currently, users can create a ...

javascriptangularjslocation-provider

Algorithm for detecting collisions in Javascript

I am looking to implement a collision detection function in JavaScript for canvas. Specifically, I have coin and piggy bank objects and want to create a function that triggers the disappearance of a coin object when it comes into contact with a piggy bank. ...

javascripthtmlcanvas

Tips for clearing object values without deleting the keys: Resetting the values of an object and its

Upon creating a service to share data among multiple components, it became necessary to reset the object values once the process was complete. To achieve this, I attempted the following: this.UserDetails = {}; This successfully cleared the values and remov ...

javascriptangulartypescriptobjectangular6

Tips for changing div visibility depending on class name

I'm looking to optimize the sorting of two sets of elements with equal amounts. Currently, they appear clustered together. Is there a method to arrange them into a single column, alternating based on their class names? For example, .item1, .item2, .it ...

htmlcssflexboxcss-grid