Creating a CSS circle spinner with a half moon shape is an innovative way to add a unique touch

Image: Circular spinner rotating along the border rim of other solid circle

For more details, please visit: https://codepen.io/sadashivjp/pen/oqqzwg I have created a UI codepen here and welcome any modifications or solutions.

The code snippet is provided below:

.outer-circle{
  width:330px;
  height:330px;
  border:30px solid #001b33;
  position:absolute;
  top:0; bottom:0; left:0;right:0;
  margin:auto;
  border-radius:50%; 
}

.spinner {
animation: rotate 5s linear infinite;
border-radius: 50%;
height: 360px;
width: 360px;
position: relative;
  left: -15px;
  top: -15px;
}

.spinner:before,
.spinner:after {
content: '';
position: absolute;
}

.spinner:before {
border-radius: 50%;
background:
linear-gradient(0deg,   hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, 0.1) 100%)   0%   0%,
linear-gradient(90deg,  hsla(0, 0%, 100%, 0.1)  0%, hsla(0, 0%, 100%, 0.5) 100%) 100%   0%,
linear-gradient(180deg, hsla(0, 0%, 100%, 0.5)  0%, hsla(0, 0%, 100%, 0.60) 100%) 100% 100%,
linear-gradient(360deg, hsla(0, 0%, 100%, 0.60)  0%, hsla(0, 0%, 100%, 0.70 ) 100%)   0% 100%
;
background-repeat: no-repeat;
background-size: 50% 50%;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
}

.spinner:after {
background: black;
        border: 15px solid #001b33;
border-radius: 50%;
top: 3%;
bottom: 3%;
left: 3%;
right: 3%;
}

@keyframes rotate {
from { transform: rotate(0deg);   }
to   { transform: rotate(360deg); }
}
<div class="outer-circle">
<div class="spinner"></div>
</div>

There are currently two issues with this code: 1) It causes a wobbling effect on the spinner circle in IE11 browser but works perfectly in Google Chrome. 2) A half-moon shape (cylindrical bottom-shaped) effect is needed at the front edge of the inner white spinner circle as shown in the image attached.

Any suggestions for solving these problems? Modifications to the existing code or alternative solutions using SVG, Canvas, or any other method are appreciated.

javascriptjquerycsshtml

Answer №1

To enhance your spinner, insert a div element within it.

.outer-circle{
  width:330px;
  height:330px;
  border:30px solid #001b33;
  position:absolute;
  top:0; bottom:0; left:0;right:0;
  margin:auto;
  border-radius:50%; 
}

.spinner {
animation: rotate 5s linear infinite;
border-radius: 50%;
height: 360px;
width: 360px;
position: relative;
  left: -15px;
  top: -15px;
}

.spinner:before,
.spinner:after {
content: '';
position: absolute;
}

.spinner:before {
border-radius: 50%;
background:
linear-gradient(0deg,   hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, 0.1) 100%)   0%   0%,
linear-gradient(90deg,  hsla(0, 0%, 100%, 0.1)  0%, hsla(0, 0%, 100%, 0.5) 100%) 100%   0%,
linear-gradient(180deg, hsla(0, 0%, 100%, 0.5)  0%, hsla(0, 0%, 100%, 0.60) 100%) 100% 100%,
linear-gradient(360deg, hsla(0, 0%, 100%, 0.60)  0%, hsla(0, 0%, 100%, 0.70 ) 100%)   0% 100%
;
background-repeat: no-repeat;
background-size: 50% 50%;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
}

.spinner:after {
background: black;
        border: 15px solid #001b33;
border-radius: 50%;
top: 3%;
bottom: 3%;
left: 3%;
right: 3%;
}

@keyframes rotate {
from { transform: rotate(0deg);   }
to   { transform: rotate(360deg); }
}
.circle{
        background: #b1bac1;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 177px;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 50% 50%;

}
<div class="outer-circle">
  <div class="spinner">
      <div class="circle">
      </div>
  </div>
</div>

Answer №2

.outer-circle{
  width:330px;
  height:330px;
  border:30px solid #001b33;
  position:absolute;
  top:0; bottom:0; left:0;right:0;
  margin:auto;
  border-radius:50%; 
}

.spinner {
animation: rotate 5s linear infinite;
border-radius: 50%;
height: 360px;
width: 360px;
position: relative;
  left: -15px;
  top: -15px;
}

.spinner:before,.spinner:after,
.outer-circle:after {
content: '';
position: absolute;
}

.spinner:before {
border-radius: 50%;
background:
linear-gradient(0deg,   hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, 0.1) 100%)   0%   0%,
linear-gradient(90deg,  hsla(0, 0%, 100%, 0.1)  0%, hsla(0, 0%, 100%, 0.5) 100%) 100%   0%,
linear-gradient(180deg, hsla(0, 0%, 100%, 0.5)  0%, hsla(0, 0%, 100%, 0.60) 100%) 100% 100%,
linear-gradient(360deg, hsla(0, 0%, 100%, 0.60)  0%, hsla(0, 0%, 100%, 0.70 ) 100%)   0% 100%
;
background-repeat: no-repeat;
background-size: 50% 50%;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
}

.spinner:after{
    background: #afb7bf;
    height: 15px; width:15px;
    border-radius: 50%;
    top: 175px;
    left: -1px;
    right: -100px;
    bottom: 0px;
}

.outer-circle:after {
background: black;
        border: 15px solid #001b33;
border-radius: 50%;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
}

@keyframes rotate {
from { transform: rotate(0deg);   }
to   { transform: rotate(360deg); }
}
<div class="outer-circle">
<div class="spinner"></div>
</div>

I trust this is the resolution you seek!

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

ng-click is not triggering my function

I'm really struggling to understand how AngularJS and Typescript can work together efficiently. My main goal is to make a simple method call, but I seem to be stuck due to some constraints in the architecture I have chosen. I must have made a mistake ...

htmlangularjstypescript

Unable to locate the accurate information

Every time I run the cycle, there should be a match with the specified parameters and the message "OK" should appear. However, I am always getting a result of "No". request( { url: 'http://localhost:5000/positions/get', metho ...

javascriptnode.js

Implementing text sliding effect upon hovering over an image using CSS

Is there a way to make text appear when hovering over an image, sliding in from the top and covering only 50% of the image height? Here's the code I have so far: <img style="background-color:#3b283e; float:left;" src="images/f1.jpg" /> <div ...

htmlcsshover

Deactivate wheel event in jQuery

I am facing a challenge in designing my website using skrollr.js and fullpage.js libraries. Skrollr relies on the value of scrollTop to transform selected elements, while fullpage.js changes the top value of the viewport when scrolling, causing issues with ...

javascriptjqueryfullpage.js

The item holds significance, but when converted to a Uint8Array, it results in being 'undefined'

Hey there! I have a Uint8Array that looks like this: var ar = new Uint8Array(); ar[0] = 'G'; ar[1] = 0x123; The value at the second index is a hexadecimal number, and I want to check if ar[1] is greater than zero. So I wrote this code: if(ar[1 ...

javascriptarraysbinaryhex

Retrieving data from handlebars variable in a client-side JavaScript file

When creating a handlebars view using hbs for the express js framework, I am faced with an issue of accessing the variables passed to the view from a separate JavaScript file. Here's an example: var foo = {{user.name}} This code obviously results ...

javascriptnode.jsexpresshandlebars.js

Displaying the chosen option from the V-menu in a different section of the application. Utilizing Vuetify

I'm working with a v-menu that has multiple options. I want to be able to display the selected option in another section of my application within the same component. Even though I attempted to use v-model for this purpose, it doesn't seem to work ...

javascriptvue.jsmenuvuetify.js

preparing a function to be executed at a later time in response to a click event

I'm working on an animation function that needs to run every time a specific set of buttons is clicked. Each button triggers different animations, but the overall animation occurs consistently with each click. Currently, I have it set up within each c ...

jqueryfunctionanimation

A guide on incorporating dynamic information into JSON files with PHP

I am currently working on developing a checkbox tree where I require dynamic values for checkboxes. Below is my code snippet. Initially, I have static data in JSON format and now I need to retrieve dynamic data from a MySQL database. Despite trying vario ...

javascriptphpjquerymysqljson

Is it possible to dynamically load a CSS link using jQuery in a unique way? Perhaps through the use of $.ajax or another method?

As I have been using jQuery to load various resources like scripts, HTML, XML, and JSON through AJAX, a thought struck me - is it feasible to use jQuery to load or remove CSS files or links when changing the theme of a website? If this is indeed possible, ...

cssajaxdynamicjquery

Using namespaces in Rails to encapsulate CSS styles

Is there a way to add namespaces to CSS within a Rails project? I have two pre-defined CSS files and two application layouts. I want the first layout to use one CSS file, and the second layout to use the other. However, both CSS files have styles for the ...

cssruby-on-rails

Show a success message once the jQuery Ajax operation is successful and then refresh the page

I am looking to implement a feature where a Bootstrap alert message is shown immediately following a successful AJAX request and page refresh. success: function(res) { window.location.reload(); $('#success').html('<div class=&qu ...

javascriptjqueryajaxdatatable

Obtain the numerical value of the vertical position of the mouse (

Currently, I am coding a JavaScript game and my objective is to designate a variable specifically for the Y axis of the mouse. I kindly request that the code be kept as simple and straightforward as possible, avoiding unnecessary complexity. That conclud ...

javascripthtmlvariablesyaxis

Animation does not trigger before switching pages

I'm attempting to create an animation that occurs before the page transitions. After finding a jQuery script on this site and tweaking it to match my HTML, I realized the code works in a fiddle but not on my actual page. Any assistance would be greatl ...

jqueryhtmlcssweb

What is the reason for jquery requiring _$ when overwriting?

var // Optimizing references to window and allowing renaming window = this, // Increasing efficiency in referencing undefined and enabling renaming undefined, // Creating aliases in case of jQuery overwrite _jQuery = window.jQuery, // Creating aliases in ...

javascriptjquery

The media does not need to be applied to the ".nav__btn" class

How can I hide an element with the ".nav__btn" class by setting its display to none when the screen width is at least 768px? I tried the following media code but it doesn't work. Media Code @media (min-width: 768px) { .nav__btn { display: ...

cssmedia-queries

The analytics event code is visible in the source code, but is not displaying in the console

I am facing an issue with a website built on Umbraco and it has me completely stumped. I have set up event tracking for Analytics on several download buttons, and while most of them are functioning properly, there is one button causing me trouble. When I ...

javascriptjquerygoogle-analyticsumbraco7

Utilizing the JavaScript map method to structure API response data

Here is the JSON data I have: { "result": [{ "name": "a", "value": 20, "max": 100, "sale_value": [{ "no": 1, "name": "aaaaa", "price": 200 }, { "no": 2, ...

javascriptreactjsvue.js

What is the process for retrieving the information sent from the client application to the jsreport server?

I want to create a downloadable pdf report through my angular application using jsreport. The client app makes a POST request passing sample data to the report server in this manner. $http.post('http://localhost:5488/api/report', { ' ...

javascriptjqueryangularjspostjsreport

Close the menu when clicking anywhere on the page body

I have successfully implemented a dropdown menu that opens when the navigation button is clicked. However, I am struggling to find a way to close the dropdown menu when the mouse clicks on any part of the page's body. If you have a solution for this ...

javascriptjquery