What is the best way to create rounded edges for a spinning spinner using CSS?

Check out my fiddle link here! I managed to create a spinning spinner using CSS, however, I am struggling to round the edges of the black part that is spinning/moving. Can someone help me achieve this effect?

.loader {
    position: relative;
   border: solid 10px #805da4;
      border-left-color: #000;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-name: spinner;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    display: block;
    border-radius: 50%;
    width: 100%;
    height: 100%;
}

Answer №1

Here is a snippet of HTML code:

<div class="highlightRoundBox">
<span class="loading">
<span class="edge edge-left"></span>
<span class="edge edge-right"></span>
</span>
</div>

And here is the corresponding CSS code:

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.highlightRoundBox {
    position: relative;
    margin: 11px 27px 13px 6px;
    width:68px;
    height: 68px;
}
.loading {
  display:block;
  position:relative;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    border: 0.5rem solid #805da4;
    border-top-color: #000;
    animation: spin 1s infinite linear;
}
.loading .edge {
  display:block;
  position: absolute;
  border-radius: 50%;
  width: 0.5rem;
  height: 0.5rem;
  background:#000;
}
.loading .edge.edge-left
{
   top:0.22rem;
  left:0.2rem;
}
.loading .edge.edge-right
{
  top:0.20em;
  right:0.22em;
}

If you want to see it in action, check out the link here.

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

Using AngularJS $routeProvider can be challenging when integrating both AngularJS and jQuery

I am encountering an issue with my application that utilizes both Angular JS and jQuery JS for mobile and web functionalities. The problem arises when the route-provider fails to navigate to the intended page if both jQuery and Angular JS are integrated to ...

Guide on using PHP to remove the trash icon glyphicon

I am currently creating a data table that includes various actions, one of which is the option to delete a row from both the table and the database. My challenge lies in figuring out how to successfully delete a particular row by simply clicking on the Tr ...

What are the best methods to prevent infinity printing?

While attempting to create a clock that displays time in real-time after adding a time zone, I encountered an issue where the time was being printed multiple times. My objective is to have it printed once and dynamically change according to the different t ...

The transformation rotation applied in CSS must not have any impact on the styling of my span and paragraph

Snippet: .details-section{ background-color: rgb(83, 83, 83); height: 200px; } .icon-container{ border: 2px solid #c49b63; width: 90px; height: 90px; transition: 0.5s ease; } .box i{ font-size: 60px; color: black; margin-top: 13px ...

Is it possible to build an AngularJS application without utilizing HTML5?

Having created an AngularJS application, I have noticed that it functions smoothly on modern browsers. However, some of my devices run on old browsers that do not support html5. Unfortunately, I am unable to upgrade these browsers. Is there a method to ope ...

Checking for mouse button press during Firefox mouse movement

Trying to drag a div without needing to add a mouseup function to avoid potential bugs if the user's mouse is outside the window. Tested with chrome, IE and firefox - "e.which" works fine in IE and chrome but firefox retains the last clicked button s ...

Decoding an array in JSON format from PHP

Hey there! Currently, I am working with an associative array in my PHP file, which I convert into a JSON object and pass to my JavaScript file. My goal is to loop through this array and identify the item with a matching key. Here's what I have done so ...

Use jQuery to add and remove classes while opening and closing div elements individually

I am working on a page that contains hidden fullscreen divs. My goal is to be able to open these divs individually by clicking on the corresponding button and close them by clicking the "close" button inside the div. Currently, I am able to open a div suc ...

Disable the mouseenter event in jQuery when the window is resized

I am facing a challenge with my code. I have two different functions that are triggered based on the screen size - one for desktop and one for mobile. The issue arises when transitioning from a desktop to a mobile view, as the hover/mouseenter effect still ...

Leveraging the power of JavaScript in conjunction with the assistance of

Here is some code I have put together following previous suggestions. I would appreciate any assistance on how to efficiently use jQuery to ensure this code functions properly. Thank you in advance! $(document).ready(function() { se ...

Changing the position of the checkbox label to be above the checkbox

Can you help me with rearranging the checkbox label position to be above the checkbox instead of on the left side? I currently have the labels appearing on the left-hand side of the checkboxes, but I would like them to be positioned above the checkboxes. ...

sticky bootstrap datepicker anchored to the top of the screen

Currently, I am working on a form that includes a date picker using the bootstrap datepicker In this setup, I have hidden the main bootstrap field and added three custom fields. When any of these fields are clicked, the calendar should open next to them. ...

What is causing my circles to not align properly in the center?

My website features circles that display various percentages. Each circle contains text indicating the percentage amount, as well as a short description underneath. While I have successfully centered all the text elements, I am facing difficulty centering ...

Exporting Python Pandas Data Frame to an HTML file

I'm attempting to save a Python Pandas Data Frame as an HTML page. I also want to ensure that the table can be filtered by the value of any column when saved as an HTML table. Do you have any suggestions on how to accomplish this? Ultimately, I want t ...

Refresh page to reload JSON file with jQuery

My current objective is the following: $.getJSON(sampleJson.json), function(data) {} I aim to read data from sampleJson.json and display it on a webpage. The displayed data can be altered through an AJAX call like so: $.ajax({type: "GET", url: "...", da ...

Is it possible for you to pinpoint the mistake in the code below?

I've been trying to locate an error in the function but have been unable to do so. As a beginner in this area, I would appreciate your patience. <html> <head><title>print names</title> <script langua ...

Using Switch Case and If Statements in Javascript and Jquery

Can you help me troubleshoot this code? It's designed to detect clicks and keypress events within the #ts_container div for buttons and anchors. The goal is to use an If statement in each case to determine if it's a click or keypress, then update ...

Count duplicated values in an array of objects using JavaScript ES6

I am working on creating a filter for my list of products to count all producers and display them as follows: Apple (3) I have managed to eliminate duplicates from the array: ["Apple", "Apple", "Apple"] using this helpful link: Get all non-unique values ...

Storing the result of parsing JSON data into a global variable

$(function() { var countFromData = 0; getReminder(); alert(countFromData); }); function getReminder() { $.getJSON("<?=base_url()?>home/leavereminder", {}, function(data) { ...

Blazor combines the power of both C# and JavaScript by allowing them to be executed in a single

There is a button that triggers a JavaScript function: <button class="btn-orange btn" onclick="expand(this.closest('.profile'))">JavaScript</button> And there is another button that executes C# code and toggles ic ...