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

Steps to turn off fancybox for mobile and show the full image instead

In this scenario... I am seeking a way to deactivate fancybox functionality on mobile devices. I have already discovered one method to disable it... And now I want to directly show the large image in the a href="xxx_large.jpg" instead of using the img src= ...

javascriptjquerycssfancyboxfancybox-2

Having difficulty adjusting the width of a div element

I've been struggling to adjust the width of the div assigned with the colors class, whether in percentage or pixels. var colors = ["RED", "GREEN", "BLUE", "YELLOW", "PURPLE"]; for (var h = 0; h <= 4; h++) { for (var i = 0; i <= colors.lengt ...

javascriptjqueryhtmlcss

Unable to properly vertically center multiple divs within a parent div and align their elements vertically within them

I'm diving into the world of HTML/CSS and grappling with various concepts. My goal is to vertically align 2 divs within a larger div, as well as center the contents within those divs. HTML: <html> <head> <link rel="stylesheet" typ ...

htmlcssdivider

Turn the flipcard hover effect into an onclick action

After successfully creating interactive flip cards using CSS hover effects, I am now faced with the challenge of adapting them for mobile devices. I'm struggling to figure out how to translate my hover effects into onclick events for a mobile-friendl ...

jqueryhtmlcss

Is it possible for a website administrator to view the modifications I have made to the CSS and HTML code?

Is it possible for a website to detect any temporary changes made to their CSS or Html through developer tools, even though these changes are not permanent? ...

htmlcss

Spartacus 3.3 - Unleashing the Full Potential of the Default Sparta Storefront Theme

Looking for advice on how to customize the default Spartacus Storefront theme (Sparta) by only overriding specific CSS vars. Any suggestions? I tried following the instructions provided at: https://github.com/SAP/spartacus/blob/develop/projects/storefront ...

cssspartacus-storefront

Bring a div box to life using AngularJS

Struggling to animate a div-Box in AngularJS? Despite trying multiple examples, the animation just won't cooperate. I'm aiming to implement a feature where clicking on a button triggers a transition animation to display the search form. I under ...

javascriptjquerycssangularjs

Twitter Bootstrap navbar-collapse can be seen overlapping navbar-header section, causing a

I seem to be having a problem with the Twitter Bootstrap navbar-collapse element overlapping the navbar-header logo, 'the alpha', and causing the link to be unclickable. As shown in the image below, the alpha logo has an href link but is not cli ...

htmlcsstwitter-bootstrap

What is the best way to arrange buttons in a row horizontally?

Desired Output I need help aligning the buttons as shown in the Desired Output image, but when I run the code, the buttons stack vertically, resulting in Output like this. I've included the HTML, CSS, and JS code below. As a beginner in UI design, I ...

javascripthtmlcss

Adjust the font size of MaterialUI icons using CSS

I am currently facing an issue where I need to increase the size of my icons by 200px, but they are defaulting to 24px which is the standard for all Google Icons. Any suggestions on how to solve this? HTML <div class="col span-1-of-4 box"> <i ...

htmlcssiconsmaterial-ui

Placing a table within a div causes the div to expand in width beyond 100%

A situation has arisen where a table with a large number of columns (30 columns) is being affected by the white-space:nowrap style set on each th tag, causing the parent div to stretch unnaturally. How can this issue be resolved and allow for a horizonta ...

htmlcsshtml-table

What is the best way to display a loading screen while simultaneously making calls to multiple APIs?

I'm currently working with Angular 8 to develop an application that retrieves responses from various APIs for users. The application is designed to simultaneously call multiple APIs and I require a loading indicator that stops once each API delivers a ...

cssangulartypescripthttp

What is the best technique for vertically aligning text within two divs placed side by side?

Thank you for taking the time to read this. I have a piece of code similar to the one below. While using line-height works when there is only one line of text, it becomes problematic when the comments section contains multiple lines. I am wondering what w ...

htmlcss

The alignment of h2 headings becomes disordered beyond a specific viewport width

Can someone help me with an issue I'm facing regarding the placement of my "rightside" navigation? The problem arises when the viewport width drops below 767px, causing the h2 elements in the rightnav to align themselves directly next to the #leftnav. ...

htmlcss

What is the complete pathway in CSS?

Consider this scenario: within my CSS file, there is a line of code used to display an image - specifically, a label icon located in the sidebar. background-image:url(../assets/images/icons/arrow_state_grey_expanded.png); However, due to its relative pat ...

cssrelative-pathfilepathcodeigniter-2

How can ListSubheader in Material-UI be customized to match the style of iOS UITableView?

Here is the current appearance of my ListSubheader. https://i.stack.imgur.com/HAzTA.png Currently, it is just aligned to the left. However, the default header view in UITableView on iOS looks like this: https://i.stack.imgur.com/F9Amv.png It features ...

ioscssuitableviewmaterial-ui

Tips for preventing text from changing its padding within a div when reducing the width and height dimensions

I am facing an issue with a div inside another div. The child div contains text, and when I apply animation to decrease the width and height, the text inside gets reset according to the new size. While I understand why this happens, I want to find a way to ...

javascriptjqueryhtmlcss

What could be causing my difficulty in locating an HTML element using jQuery/JS string interpolation?

In my project, I have a set of div blocks each identified by a unique numerical id. For instance: One of the tasks in my project is to select the 29th element following a specific chosen element. For example, if I choose the first div with id 1, then I s ...

javascriptjqueryhtmlcss

Implementing text overlays on images within a Bootstrap 4 navigation bar

I am struggling to grasp the flex structure in Bootstrap. I'm attempting to overlay text on an image within the navbar, but it seems the container of the navbar is causing issues. Perhaps my containers are not set up correctly. Any assistance would be ...

htmlcsstwitter-bootstrapbootstrap-4

Navigating through a Single Page Application (SPA) can be achieved without

Can the CSS (Level 4) @document rule handle URLs that have the # symbol or include query parameters? For those who are not familiar with this topic Currently, only Firefox supports this feature with the @-moz-document prefix. If other browsers start supp ...

javascripthtmlcssroutessingle-page-application