Having trouble getting the CSS 3 Spin feature to work?

Using webkit for previewing in chrome.

The spinning circles I created are not working properly (definitely not an HTML issue.)

#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}

#loader {
display: inline-block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;

border-radius: 50%;
border: 3px solid transparent;
border-top-color: yellow;

-webkit-animation: spin 1.5 infinite;
animation: spin 1.5 infinite;
}

#loader:before {
content: "";
position: absolute;
top: 5px;
left:5px;
right: 5px;
bottom: 5px;

border-radius: 50%;
border: 3px solid transparent;
border-top-color: orange;

-webkit-animation: spin 1.5 infinite;
animation: spin 1.5 infinite;
}

#loader:after {
content: "";
position: absolute;
top: 15px;
left:15px;
right: 15px;
bottom: 15px;

border-radius: 50%;
border: 3px solid transparent;
border-top-color: red;

-webkit-animation: spin 1.5 infinite;
animation: spin 1.5 infinite;
}

@-webkit-keyframes spin {
0%   {-webkit-transform: rotate(0deg);}

100% {-webkit-transform: rotate(360deg);}
}
@keyframes spin {
0%   {transform: rotate(0deg);}

100% {transform: rotate(360deg);}
}

cssanimation

Answer №1

Don't forget to include the s in the animation-duration

#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}

#loader {
display: inline-block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;

border-radius: 50%;
border: 3px solid transparent;
border-top-color: yellow;

-webkit-animation: spin 1.5s infinite;
animation: spin 1.5s infinite;
}

#loader:before {
content: "";
position: absolute;
top: 5px;
left:5px;
right: 5px;
bottom: 5px;

border-radius: 50%;
border: 3px solid transparent;
border-top-color: orange;

-webkit-animation: spin 1.5s infinite;
animation: spin 1.5s infinite;
}

#loader:after {
content: "";
position: absolute;
top: 15px;
left:15px;
right: 15px;
bottom: 15px;

border-radius: 50%;
border: 3px solid transparent;
border-top-color: red;

-webkit-animation: spin 1.5s infinite;
animation: spin 1.5s infinite;
}

@-webkit-keyframes spin {
0%   {-webkit-transform: rotate(0deg);}

100% {-webkit-transform: rotate(360deg);}
}
@keyframes spin {
0%   {transform: rotate(0deg);}

100% {transform: rotate(360deg);}
}
<div id="loader-wrapper">
<div id="loader">

</div>
</div>

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 default value of the input color in HTML/NextJS does not update when changed

Issue: The color input does not change when the default value (#ffffff) is declared. https://i.sstatic.net/BpqUj.png However, it works normally if I don't declare a default value. https://i.sstatic.net/0dBd6.png Note: Using NextJS framework. <i ...

javascripthtmlcssreactjsnext.js

Expanding Images with JQuery Accordion

I'm facing a problem where I need to include accordions on my website with images, but whenever the accordion is opened, the image ends up stretched. Is there a solution to prevent this from happening? Below is the code snippet I am using: [Fiddle] ...

jqueryhtmlcssaccordion

Utilizing useState for React Data Picker

I recently attempted to implement the React Data Picker in my React project using npmjs. However, I encountered an issue when trying to import useState from import React, { useState } from "react"; The error message displayed: 'useState&a ...

cssreactjswebfrontendbackend

Issue with Email Signature on replies

Recently, I had some email signatures designed and they appear great when sent out, but encounter issues upon receipt or reply: The logo gets distorted and occasionally enlarges significantly during replies. The font color switches to black when receivin ...

htmlcssemailhtml-email

CSS Dynamix - Include the parameter ?value to resolve caching issues

I came across a discussion on the issue of Dynamic CSS caching problem where it was suggested to append ?value to the end of the css file name for better caching. I am currently using themes and the css files are loaded automatically. Is it possible to use ...

csscachinghttphandler

Is there a way to eliminate the shadow effect on a specific part of a material-ui AppBar?

I want to remove the shadow that appears on the navbar when it overlaps with the sidebar. https://i.sstatic.net/eHh0u.png Currently, I am using Material-UI's AppBar component for my NavBar. export default function NavBar() { return ( <div&g ...

cssreactjsmaterial-uijsx

How can I incorporate calc() with fit-content or a similar function?

Is there a way to set the height of a div to "fit-content minus 15px" without using JavaScript? I attempted to use calc(), but it did not yield the desired result. My objective is to dynamically adjust the height of an element containing multiple p tags, ...

htmlcsssass

The imported font used in Firefox is displaying with a striking underline text-decoration

I am currently using the Cardiff font in a project and attempting to apply the style text-decoration:underline to it. While this works perfectly in Chrome (Version 35.0.1916.114), in Firefox (Version. 29.0.1) the underline appears to be crossing through t ...

cssfont-faceunderline

CSS positional sequencing dilemma

I am having trouble with the layout in this particular scenario: . In the #boxOne div, I have a link followed by a div (#formloc) containing an input and another link. Even though the first link ("Appliquer une localisation") is placed before the #formlo ...

css

Affix Object to Bottom of Stationary Element

I have a header element that I want to remain fixed while scrolling. The scrollable area should be positioned directly after the fixed header, without using position: absolute and removing it from the document flow. To better illustrate the issue, I' ...

htmlcssflexbox

Adding a <span> element within an <h1> tag in WordPress

I am attempting to create this layout in Wordpress using the code <h1>This is my <span>title</span></h1>, but I am unsure how to incorporate a <span> tag within the <?php the_title(); ?> function. After consulting the c ...

phphtmlcsswordpress

Creating a dynamic text design using Bootstrap or CSS: What's the best approach?

I attempted to enable responsive font sizes in Bootstrap 4.3.1 by setting the $enable-responsive-font-sizes variable to true, but I did not see any changes. Below is the code from my template.html file: <div class="m-2" id="role" ...

cssangularbootstrap-4responsive

How to avoid clipping in Bootstrap 4 when a row overflows with horizontal scrolling

In order to allow for horizontal scrolling of all contained columns, I created a row using the row class. To implement this feature, I followed advice from a contributor on Stack Overflow. You can view their answer by following this link: Bootstrap 4 hori ...

cssscrollbootstrap-4overflowclipping

Tips for successfully implementing overflow-x in a timeline layout without causing any format disruptions

I've been working on a dynamic timeline design that adapts to different screen sizes. I applied overflow-x property to prevent horizontal scrolling in the mobile version, making the burger menu's sub-items visible without requiring a click. Howev ...

htmlcsshtml-listsoverflowtimeline

Issue with slide animation in carousel on Bootstrap version 4.5.2 not functioning as intended

Recently, I've been diving into learning Bootstrap (v4.5.2) and decided to implement a basic carousel on my website that slides automatically. Following the documentation on Bootstrap's website, I copied the example code for a simple carousel wit ...

htmlcssbootstrap-4carousel

Exploring Angular's Animation Feature for HTML Element Movement

I'm currently using @angular/animations module to animate HTML objects and I want to move an object when a button is clicked. For example: * The object initially has top: 800px, left: 800px * Clicking the 'W' button should move the obje ...

cssangular

Setting a button next to an input field in Bootstrap 4: A step-by-step guide

I have a form group with a label and input field. My goal is to position the button next to the input field on the same line. Here's an example of my code: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstra ...

cssbootstrap-4

What is causing my CSS grid items to overlap instead of aligning neatly in rows and columns?

I am encountering an issue with CSS grid where items are stacking on top of each other when I assign them to grid template areas. As a newcomer to CSS grid, I suspect that I may be overlooking some key principles. You can view my playground here: https:// ...

csslayoutcss-grid

Using animation.width() in Javascript to create a countdown

Currently, I am working on creating a visual countdown for my users to indicate when an animation will finish. The code snippet below shows my initial attempt: function setClassAndFire(){ timer = setInterval(function () { t--; ...

javascriptcssanimationcountdown

Div vanishes once SVG Gaussian blur is applied

I'm attempting to add a Gaussian blur effect to an element that contains some child nodes with content. In Chrome, I successfully applied the blur using the following style: -webkit-filter: blur(2px); Unfortunately, Firefox does not support thi ...

htmlcssfirefoxsvgsvg-filters