create a stunning spinner with a transparent center

Check out this amazing loader code:

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: white;
}

.container{
  positition: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .loader{
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #424242;
  animation: animate 1s linear infinite;
}

@keyframes animate{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

.container .loader::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to top, transparent, dodgerblue);
  background-size: 100px 180px;
  background-repeat: no-repeat;
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
}

.container .loader::after{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background-color: #00B0FF;
  border-radius: 50%;
  z-index: 10;
  box-shadow: 0 0 10px #00B0FF,
              0 0 20px #00B0FF,
              0 0 30px #00B0FF,
              0 0 40px #00B0FF,
              0 0 50px #00B0FF,
              0 0 60px #00B0FF,
              0 0 70px #00B0FF,
              0 0 80px #00B0FF,
              0 0 90px #00B0FF,
              0 0 100px #00B0FF;
}

.container .loader span{
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border-radius: 50%;
  background-color: #212121;
}
<div class="container">
  <div class="loader">
    <span></span>
  </div>
</div>

I am trying to figure out a way to make the black background in the center of the spinner transparent without affecting the spinning effect. Removing the background color from container .loader span ruins the spinner completely. Is there any solution to achieve the same spinning effect with a transparent center?

javascripthtmlcss

Answer №1

To achieve the desired effect, you can utilize a mask on the before element as shown in the following code snippet:

 mask: radial-gradient(farthest-side at right, transparent calc(100% - 10px), #fff 0);

This will maintain only the border's visibility while eliminating all background elements.

body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin:0;
  background:linear-gradient(to right,grey,transparent);
}
.loader{
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  animation: animate 1s linear infinite;
}

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

.loader::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to top, transparent, dodgerblue) no-repeat;
  background-size: 100% 80%;
  border-radius: 100px 0 0 100px;
  -webkit-mask: radial-gradient(farthest-side at right, transparent calc(100% - 10px), #fff 0);
}


.loader::after{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 10;
  box-shadow: 0 0 10px #00B0FF,
              0 0 20px #00B0FF,
              0 0 30px #00B0FF,
              0 0 40px #00B0FF,
              0 0 50px #00B0FF,
              0 0 60px #00B0FF,
              0 0 70px #00B0FF,
              0 0 80px #00B0FF,
              0 0 90px #00B0FF,
              0 0 100px #00B0FF;
}
<div class="loader"></div>

Alternatively, for a circular border appearance, consider the following adjustment to the mask:

body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin:0;
  background:linear-gradient(to right,grey,transparent);
}
.loader{
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  animation: animate 1s linear infinite;
}

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

.loader::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, transparent, dodgerblue) no-repeat lightgrey;
  background-size: 50% 80%;
  border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #fff 0);
}


.loader::after{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 10;
  box-shadow: 0 0 10px #00B0FF,
              0 0 20px #00B0FF,
              0 0 30px #00B0FF,
              0 0 40px #00B0FF,
              0 0 50px #00B0FF,
              0 0 60px #00B0FF,
              0 0 70px #00B0FF,
              0 0 80px #00B0FF,
              0 0 90px #00B0FF,
              0 0 100px #00B0FF;
}
<div class="loader"></div>

Answer №2

Adjust the background colors to a lighter tone in both .container .loader and .container .loader span.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: white;
}

.container{
  positition: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .loader{
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #DBDBDB; /* change this to a lighter color */
  animation: animate 1s linear infinite;
}

@keyframes animate{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

.container .loader::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
   // styles for before pseudo-element
}

.container .loader::after{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: #00B0FF; // retained from original code snippet
}

.container .loader span{
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border-radius: 50%;
  background-color: #FEFEFE; /* change this to a lighter shade */
}
<div class="container">
  <div class="loader">
    <span></span>
  </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

Angular leaflet markers do not replace each other; they overlap instead

During my ngOnInit initialization process, I set up markers on a map with the same default icon. However, when selecting a marker, I want it to change to a "selected icon". The issue arises when trying to replace the old icon with the new one, as it simply ...

javascriptangulartypescriptleaflet

Pushing state history causes browser back and forward button failure

I'm currently utilizing jQuery to dynamically load content within a div container. On the server side, the code is set up to detect if the request is being made through AJAX or GET. In order to ensure that the browser's back and forward buttons ...

javascriptjquerybrowser-historypushstate

Tips on displaying a div for a brief moment and then concealing it

Is it possible to create a div that will disappear after 10 seconds of the page loading using PHP or JavaScript? Here is an example of the code: <html> <head></head> <body> <div class="LOADING" id="LOADING" name="LOADING">&l ...

javascripthtmlcss

TypeScript error: Cannot assign type 'Element' to variable of type HTMLInputElement

I find myself faced with an issue while working on a project that involves TypeScript and React. Specifically, I am working on a dialog window component where I need to store the trigger element, like a button, as a property. My goal is to return focus to ...

javascriptreactjstypescripttypes

Can you identify the date stored in this JSON object?

I need to analyze some JSON data This is the specific snippet required for my query. "UpdatedDate":"\/Date(1311377875937)\/" I'm unsure about that number, but the updated date indicates when the item was last modified Moreover, how can I ...

javascriptjson

Disabling the experimental app directory feature in NextJs

I've been working on a real-life project and decided to test out the new App directory feature that comes with Next.js version 13. However, I encountered some issues such as images and fonts not loading properly. Now, I'm looking to opt out of th ...

javascripttypescriptnext.js

Tips on transferring a Rails variable to Ajax

Struggling to integrate a progress bar (Javascript) into my Ruby on Rails application, I am facing difficulties in passing values from the controller to JS for updating the bar. In my initial attempt, I used a basic global variable ($count), but it remain ...

javascriptjqueryruby-on-railsrubyajax

Moving information from one controller to another, or the process of converting a controller into a service

Is there a way for me to transfer information from one controller to another? Or can I create a service from a controller? Specifically, I am looking to retrieve coordinates and store them in an object along with other variables. When I try to inject depen ...

javascriptangularjsinputcontrollerionic-framework

Unable to download the jQuery Plugin

I am looking to install a gallery without using flash, and I came across this jQuery plugin called Grid-A-Licious. However, I am having trouble figuring out how to install and use it since it is distributed as a .zip archive with two .js files but no index ...

javascriptjquerycsspluginsgallery

Steps to conceal a div when a particular property is detected in one of its child elements (img)

On my website, I have a label and a checkbox. The checkbox in question is created by Salesforce (thus the dynamic appearance of the span id). This excerpt shows the code from my webpage: <div class="fds" id="checkinput"> <label>Additional Rev ...

javascriptjqueryhtmlcss

Removing Level of Detail models in a Three.js Group

My THREE.Group() contains numerous LODs and I need to remove all the objects within it. The group includes Lights, LensFlare, other Groups, Points, Lines, and Meshes totaling around 350 items. systemGroup.traverse (function (obj){ systemGroup.remove(o ...

javascriptthree.js

Issues with Rails not successfully sending AJAX data to the controller

I am new to AJAX, so please bear with me while I try to figure this out. My goal is to send data from a chat message box to two places – the chat box itself and to a method in my Rails backend. This way, I can display the message in real-time and also st ...

javascripthtmlruby-on-railsrubyajax

Image malfunction in jquery blockui occurs following multiple AJAX requests, except when within the success function of an AJAX request

I have a perplexing question that has been on my mind. While I am aware of the issue and its resolution, I am struggling to comprehend the underlying reason. There is a particular method that goes through some preliminary steps, validation, saving, and cl ...

javascriptjqueryajaxjquery-blockui

CSS- Creating a left-aligned child menu

Hello everyone, my objective is to expand the child menu towards the left side instead of the default right side placement. Below is the CSS code for achieving this, /*<![CDATA[*/ /* page styling, unimportant for the menu. only makes the page look ...

htmlcssmenuhtml-lists

Is there a way to reorganize the image/text grid using a media query?

In my grid, each row contains text in one column and an image in the other. The order of these columns is determined by the user in a CMS and can vary for each row. https://i.sstatic.net/MwR5O.png On mobile devices, I always want the image to appear abov ...

htmlcssbootstrap-4flexbox

Stop Content Overflow From Div (and enable scrolling)

Here is a simple Bootstrap 4 markup example: <div class="card shadow m-3" style="width:500px; height: 280px"> <div class="card-body"> <div class="row"> <div class="col-3 ...

htmlcssbootstrap-4

Is it possible to customize the weight and color of the border in the Material UI Dialog?

Hi there! I've been attempting to incorporate an external frame onto the Dialog Box from Material UI, but haven't had much success. I tried the following code snippet without any luck: overrides: { MuiDialog :{ paper : { borderWidth ...

cssreactjsdialogmaterial-uiborder

Need help with updating React component state within a Meteor.call callback?

I've constructed this jsx file that showcases a File Uploading Form: import React, { Component } from 'react'; import { Button } from 'react-bootstrap'; class UploadFile extends Component { constructor(){ super() this. ...

javascriptreactjsmeteormeteor-react

Issue with nested promises not functioning as anticipated within a for loop

I'm currently facing an issue with extending a Promise inside a .then() block. My goal is to update records in the database using a for-loop and then close the database after all updates have been processed. However, the application is exiting abruptl ...

javascriptnode.jsmongodbpromise

What are the specific pages on a three-page website that require canonical tags?

I seem to be facing an issue with Google Search Console. The error message states: Duplicate without user-selected canonical Currently, my site looks like the following. There are a total of 6 links. https://i.stack.imgur.com/s4uXF.png None of these l ...

htmlcanonical-link