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

The ClearInterval() function does not take effect instantly

I've implemented a Carousel with an auto-toggle feature using the setInterval() function to switch between tabs every 4 seconds. However, I now need to stop this automatic toggling when a specific tab is clicked. You can find the HTML and jQuery for ...

javascriptjqueryjquery-events

Fluidity in CSS Video

I'm currently working on developing a dynamic video display component for my personal portfolio website. The main concept involves showcasing a mobile application video placed on top of a phone mockup within a designated container. My challenge lies ...

htmlcss

Chrome's behavior of reducing the width of inline elements when the content is dynamic

Upon opening the specified URL in Google Chrome, an issue can be observed where on the initial load everything appears fine. However, upon refreshing, the width of the three items at the top (Bedingungen, Preise, and So geht's) collapse. This seems to ...

jqueryhtmlcss

Responsive Design: Concealing a Sidebar with CSS

Seeking assistance with optimizing the layout of my app, . It currently displays a menu on the left and a login form in the center, with a graph shown to users upon logging in. Is there a way to configure it so that when accessed on iOS: 1) the left menu ...

javascripthtmlcss

Ways to consistently press a particular button every single second

The code on the webpage looks like this: <div id="content"> <div class="container-fluid"> Slots <p>The current jackpot is 23220!<p/> <p>You lose.</p> <form method=post action=/game ...

javascriptjqueryrepeatclicking

Guide on creating a square within an element using JavaScript

After conducting thorough research, I find myself unsure of the best course of action. My situation involves a Kendo Grid (table) with 3 rows and 3 columns. Initially, the table displays only the first column, populated upon the page's initial load. S ...

javascripthtmlcssasp.netkendo-ui

Tips for maintaining a sticky header while continuing to utilize Bootstrap table classes such as table-responsive and table-stripped

This is Here's my code on jsfiddle I've attempted to make the header sticky while maintaining the current layout, but every approach I've tried ends up messing with the responsiveness of the table. My next plan involves using a JavaScript ...

javascriptjquerycsstwitter-bootstrap

What is causing the Unhandled Rejection (TypeError) error after I move the object in my Redux application and receive the message "Cannot read property 'filter' of undefined"?

I've been working on a Redux application. I've made modifications to a couple of files, and here are the changes in the two files: index.js: const store = createStore( reducer, { propReducer: { day: 1, data: [], filte ...

javascriptreactjsredux

Webpack fails to resolve paths provided by a JavaScript variable

I am currently developing an application using vue and ionic, but I have encountered an issue with loading assets as the paths are not resolving correctly. <template> <div id="index"> <img :src="image.src" v-for="image in image ...

javascriptvue.jswebpackionic4

Tips for configuring identical libraries under different names

As a Japanese web developer, I struggle with my English skills, so please bear with me. Currently, I am utilizing an npm library. I have forked the library and made some modifications to it. In order to incorporate these changes, I updated my package.js ...

javascripttypescriptnpm

Error: Vuex commit fails due to JSON circular structure issue

Using Vue.js along with the vuex store, I make an API call to validate an item, which returns arrays of errors and warnings. Below is my vuex action : export function validateitemReview ({ commit, dispatch, state }, { reviewId, type, itemreviewData }) { ...

javascriptvue.jsvuejs2vuex

Having difficulties retrieving the value of the div in the voting system

Whenever the element with the id #upvote is clicked, the value of the element with the id #vote increases by 1. On the other hand, when the element with the id #downvote is clicked, the value decreases by 1. However, there seems to be an issue where if the ...

javascriptphpjquery

The AJAX call is failing to update the state data in my React component

I've recently delved into ReactJS and encountered an issue regarding setting state while using an AJAX request. The AJAX call successfully communicates with the server, receiving a 200 code response, indicating that the API request functions properly ...

javascriptjqueryajaxreactjses6-module-loader

<Select> Placeholder customization

For my react project, I am utilizing material-Ui and I am looking to have a placeholder that stands out by having grey text instead of black when compared to the selected item. <Select name="answer" value={values.answer} onChange={handleChange} onBlur= ...

javascriptcssreactjsmaterial-ui

What could be causing my canvas to not display my sprite?

Currently, I am in the process of learning JavaScript and experimenting with creating games to make the learning experience more enjoyable. However, I am facing an issue while using EaselJS and CreateJS to develop these games as a beginner. I need some as ...

javascripthtmlcanvaseaseljscreatejs

JavaScript Countdown Timer Programming

I've scoured countless resources, but most of them only provide code for counting down to a specific day. I'm reaching out in the hopes that someone can assist me by crafting some JavaScript for the following HTML structure. This section of my w ...

javascriptcountdowntimer

getting rid of the angular hash symbol and prefix from the anchor tag

I am having difficulty creating a direct anchor link to a website. Whenever I attempt to link to the ID using: where #20841 is my anchor tag. Angular interferes with the URL and changes it to: This functions properly in Chrome and Firefox, but i ...

javascriptangularjs

Information is not appearing in the table

I'm having trouble displaying data in a table format. The issue arises when I try to fetch data from a JSON file using a custom service. The fetched data is then inserted into the $rootScope object. However, when I preview the view, it appears blank ...

javascriptangularjsangularjs-scope

What is the best approach to comparing two times in JavaScript to ensure accuracy after an NTP time update?

We are facing an issue with a JavaScript function that retrieves the start and end times of two events: var startTime = new Date().getTime(); // A lengthy task is executed var endTime = new Date().getTime(); The problem we encountered is that getTime() s ...

javascriptntp

Using AngularJS and the ng-show directive, you can set a <div> element to

Objective: My aim is to show the content of a div according to the status of checkboxes, while also ensuring that these divs are visible by default If I have this code snippet: <html> <head> <script src="https://ajax.googleapis.com/ajax/li ...

javascriptjqueryhtmlcssangularjs