Activating the spinner functionality using JavaScript

Having trouble activating the spin button with JavaScript for my spinner. Any ideas on how to make it work?

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Spinner</title>
    <link rel="stylesheet" type="text/css" href="style.css" >
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>spinner</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
    <div class="wheel">
        <div class="spinner" id="spinner">
            <div class="spin">
                <span class="one"><strong>1</strong></span>
                <span class="two"><strong>2</strong></span>
                <span class="three"><strong>3</strong></span>
                <span class="four"><strong>4</strong></span>
                <span class="five"><strong>5</strong></span>
                <span class="six"><strong>8</strong></span>
                <span class="seven"><strong>7</strong></span>
                <span class="eight"><strong>6</strong></span>
            </div>
        </div>
    </div>
    <button class="rotatewheel" onclick="magicWheel()">Rotate</button>
<script src="script.js"></script>
</body>
</html>

Provided all the necessary code snippets above. Hope someone can help me figure this out.

Answer №1

If you're looking to create a spinner, consider checking out this tutorial on How TO - CSS Loader.

Alternatively, you can build a JavaScript-controlled spinner from scratch.

I personally created a Lock-Screen loader using a div element to cover the entire screen. You can take a look at it below:

Your unique rewritten text goes here...

Check out this Codepen example to customize your spinner further.

Library

You can also use npm to install this package.

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

Customize images using React JS to add an overlay on top of an HTML img

I'm looking to achieve a similar effect to Facebook where hovering over an image tag triggers a little overlay asking if you want to edit the photo. I have the hover functionality working, but I'm unsure how to implement the overlay. The image is ...

An AngularJS application that sometimes refreshes using both href and ng-href

Whenever I click on a link within my AngularJS app, it sometimes refreshes unexpectedly. It seems to happen randomly, whether I use href="/foo" or ng-href="/foo/{{bar}}". I've noticed that this issue occurs when I navigate between links too quickly, ...

Attempting to develop a search feature for a multi-layered array using JavaScript

I've been attempting to search through a multidimensional array in JavaScript, but I'm facing some issues. Specifically, I am looking to input the first number from one of the 3 rows and retrieve the entire row. Essentially, my goal is to extract ...

`Scrolling through a horizontal menu with no scrollbar present`

Is there a way to create a horizontal menu that can scroll left or right without the scrollbar? I'm looking for a solution like adding on-screen arrow buttons or implementing mouseover functionality. What would be the best approach? div.scrollmenu ...

In TypeScript, it can be challenging to determine the equality between a value and an enum

I am encountering an issue with my simple code: enum Color { BLUE, RED } class Brush { color: Color constructor(values) { this.color = values.color } } let JSON_RESPONSE = `{"color": "BLUE"}` let brush = new Brush(JSON.parse(JSON ...

Ways to navigate to a new webpage in JavaScript without the need to click on a link

After going through various posts and trying different methods, I am still facing challenges. In a PHP page, I have an HTML form with an onClick command that triggers a JavaScript validation procedure when the user clicks a button. While everything funct ...

JavaScript: Replace image title on mouse over

I am having trouble adding '_hover.jpg' to my images on mouse over. Can anyone provide assistance with this issue? Thank you in advance. <script type="text/javascript> $(document).ready(function () { $(".img").mouseover(function (e) { ...

specifying the content-type header when making a POST request

I keep encountering a "415 error: Unsupported Media Type" when attempting to send JSON data to the server. Below is the AJAX call I am using: $.ajax({ type: "POST", url: 'http://mywebsite.com?'+"token="+token+"&a ...

An example of deleting a jsplumb 1.4.1 endpoint using a UUID or object

I am dealing with `div` elements that have two endpoints each, one on the left and one on the right side. My goal is to remove all the right-sided endpoints. Each endpoint has a unique UUID associated with it. I have an array containing all the UUIDs of th ...

The close box in the top right corner of the jQuery dialog popup does not feature an "x" icon

I'm having an issue with my jQuery popup where the "x" is not showing up in the close box at the top right corner of the popup. https://i.sstatic.net/0GPgV.png I followed this example: https://jqueryui.com/dialog/ I have included the link and scrip ...

Combining the functionality of a link button in ActionScript 3 with a fade-out effect in

Seeking guidance as a newcomer to jQuery. I am a graphic designer who recently stumbled upon a cool jQuery script that transitions between website pages with a fade effect when clicking on links. I have implemented this script in a custom.js file within a ...

The output of the incorrect .bind() example is not as

I recently came across the .bind() method while learning JavaScript. The example I found on MDN here was quite helpful, but I decided to add some console.log() statements for better understanding. this.x = 9; // Here 'this' refers to the glob ...

Utilizing _.where() in underscore to perform case-insensitive value comparisons

I need help with a webpage feature that allows users to search for specific values in a file. However, I want the search functionality to be case-insensitive while keeping the original case sensitivity of the data in the file. Currently, I am using an und ...

The "events" module could not be resolved in React-Native

The server encountered an internal error: 500 URL: Body: {"message":"There was an issue resolving the module events from the specified directory. This may be due to a module not existing in the module map or directories listed.","name":"UnableToResolveEr ...

AngularJS table with resizable columns for seamless data browsing

Most examples of expandable tables using ng-repeat feature a separate content for the expanded row, like an independent table inside the detail row. I have implemented many expandable tables using these methods, similar to the following: <tr ng-repeat ...

How to create a non-clickable section within a linked div

Website: I am interested in linking just the triangle banner located at the top right corner of the page. The triangle image is actually a transparent rectangle with only the triangle portion filled in, so I want to ensure that only that particular sectio ...

What could be causing the checkbox filter to malfunction in VueJS?

After spending a solid 8 hours attempting to make this work, I'm still struggling. My main goal is to display a loop that shows all items by default. Then, when a user selects a checkbox, it will filter out the items where they are set to false. Here ...

What are the benefits of installing both libraries A (react-router) and B (react-router-dom) together, especially when library B relies on library A for functionality

I am currently exploring the necessity of explicitly specifying all dependencies in the packages.json file. For instance, when I want to utilize the react-router library. According to the official documentation: npm install react-router@6 react-router-d ...

Utilize AngularJS to compare and eliminate duplicate elements between two lists

Two lists are causing me trouble: List1 = ['option1','option2','option3','option4','option5','option6','option7']; List2 = ['option3', 'option4', 'option7&ap ...

Encountering a syntax error (1064) in MySql when using LIMIT in combination with Express and

Struggling to fetch specific mysql rows with a limit using backend programming. This snippet is from my API's index.js file. app.get("/", (req, res) => { return res.send("test"); }); app.get("/Questions", async (req, res) => { const questio ...