Transform static borders into mesmerizing animations by changing the solid lines to dotted lines using CSS

I've managed to create a circle animation that is working well, but now I'm looking to switch from solid lines to dotted lines. Can anyone provide guidance on how to accomplish this?

Here is the current appearance:

#loading {
  width: 50px;
  height: 50px;
  margin: 30px auto;
  position: relative;
}
.outer-shadow, .inner-shadow {
  z-index: 4;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.inner-shadow {
  top: 1px;
  left: 1px;
  width: 48px;
  height: 48px;
  margin-left: 0;
  margin-top: 0;
  border-radius: 100%;
  background-color: #ffffff;
}
.hold {
  position: absolute;
  width: 100%;
  height: 100%;
  clip: rect(0px, 50px, 50px, 25px);
  border-radius: 100%;
  background-color: #fff;
}
.fill, .dot span {
  background-color: #f00;
}
.fill {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  clip: rect(0px, 25px, 50px, 0px);
}
.left .fill {
  z-index: 1;
  -webkit-animation: left 1s linear;
  -moz-animation: left 1s linear;
  animation: left 1s linear both;
}
@keyframes left {
0% {
-webkit-transform:rotate(0deg);
}
100% {
transform:rotate(180deg);
}
}
@-webkit-keyframes left {
0% {
-webkit-transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(180deg);
}
}
.right {
  z-index: 3;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}
.right .fill {
  z-index: 3;
  -webkit-animation: right 1s linear;
  -moz-animation: right 1s linear;
  animation: right 1s linear both;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}
@keyframes right {
0% {
-webkit-transform:rotate(0deg);
}
100% {
transform:rotate(180deg);
}
}
@-webkit-keyframes right {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
.inner-shadow img {
  margin-left: 8px;
  margin-top: 7px;
}
<div id='loading'>
  <div class='outer-shadow'> </div>
  <div class='inner-shadow'> </div>
  <div class='hold left'>
    <div class='fill'></div>
  </div>
  <div class='hold right'>
    <div class='fill'></div>
  </div>
</div>

javascripthtmlcss

Answer №1

Here is an alternative method for adjusting dotted lines. Instead of moving the dotted lines themselves, I use a technique where I cover and uncover a dotted circle with another circle that has a white border. Take a look at the example below:

#c1 {
  stroke-width: 1px;
  stroke: red;
  fill: transparent;
  stroke-dasharray: 5;
}

#c2 {
  animation: render 1s linear both;
  stroke-width: 5px;
  stroke: white;
  fill: transparent;
  stroke-dasharray: 377;
  stroke-dashoffset: 0;
}

@keyframes render {
  100% {
    stroke-dasharray: 377;
    stroke-dashoffset: -377;
  }
}
<svg width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
    <circle id="c1" cx="120" cy="120" r="60" />
    <circle id="c2" cx="120" cy="120" r="60" />
</svg>

Answer №2

.circle {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  border: 2px dotted transparent;
  border-right-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-top-color: transparent;
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  position: relative;
  margin: 30px auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  25% {
    border-right-color: red;
  }
  50% {
    border-bottom-color: red;
  }
  75% {
    border-left-color: red;
  }
  100% {
    border-top-color: red;
    border-left-color: red;
    border-bottom-color: red;
    border-right-color: red;
    transform: rotate(360deg);
  }
}
<div class="circle"></div>

Edit, Updated

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-color: transparent;
  border-style: hidden;
  border-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-top-width: 0px;
  border-bottom-style: dotted;
  border-left-style: dotted;
  border-top-style: dotted;
  border-right-style: dotted;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  animation-delay: .25s;
  position: relative;
  margin: 30px auto;
  transform: rotate(45deg);
  transition: border 1s ease-in .25s;
}

@keyframes spin {
  0% {
    border-top-width: 2px;
    border-top-color: red;
  }
  25% {
    border-right-width: 2px;
    border-right-color: red;
  }
  50% {
    border-bottom-width: 2px;
    border-bottom-color: red;
  }
  75% {
    border-left-width: 2px;
    border-left-color: red;
  }
  100% {
    border: 2px dotted red;
  }
}
<div class="circle"></div>

Answer №3

If you're looking for an easier way to enhance your design, I highly recommend using SVG.

In the following example, I demonstrate the use of stroke-dasharray and stroke-dashoffset to manipulate the border. stroke-dasharray determines the length of the dashes, while stroke-dashoffset specifies the starting point of the dashed line.

Initially, I set stroke-dasharray: 377; and stroke-dashoffset: 377;. This means there are 377px of dashes and spaces with a starting offset of 377px.

By changing the stroke-dashoffset to 0, the circle border will slowly be drawn (reducing the offset). Since the circumference length is around 377px (2 x Pi x 60px), this will create a solid circle without any dashes.

During the last frame of the animation, reducing the stroke-dasharray to smaller values will transform the border into dashes. 

circle {
  stroke-width: 1px;
  stroke: red;
  fill: transparent;
  stroke-dasharray: 377;
  stroke-dashoffset: 377;
  animation: render 1s linear both;
}

@keyframes render {
  99% {
    stroke-dasharray: 377;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 5; 
    stroke-dashoffset: 0;
  }
}
<svg width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
    <circle cx="80" cy="80" r="60" />
</svg>

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

Can a div's style be modified without an id or class attribute using JavaScript or jQuery?

Is it possible to change the style of a div that doesn't have an id or class assigned to it? I need some assistance with this. Here is the div that needs styling: <div style="display:inline-block"> I would like the end result to look somethin ...

javascriptjqueryhtmlcss

Achieve instant redirection upon user logout with Angular and Meteor

Within a Meteor application utilizing Angular, there exists a specific state that mandates the user to be logged in. Currently, this requirement is implemented using $meteor.requireUser() function run($rootScope, $state) { $rootScope.$on('$state ...

javascriptangularjsnode.jsmeteorangular-meteor

JavaScript payload object's name

Here is the data I have received. {name: "Sinto 6", val: {…}, line: "Sinto 6"} line: "Sinto 6" name: "Sinto 6" val: AvgMachTime: 253 AvgManTime: 1343 CollectMachTimer: 359 CollectManTimer: 108 CycleTimeMach: 359 Cy ...

javascriptvue.jsobject-reference

The SyntaxError is triggered by the React-Native FlatList component

As a newcomer to React Native, I am facing an issue with refreshing the component to load city names stored in async storage. The error occurs when I utilize the FlatList component for the first time. The specific error message I encountered is: SyntaxE ...

javascriptandroidreactjsreact-native

Is there a way to utilize ajax to submit a form and upload a file to a spring controller?

I have a form with four fields: file, name, type (as a string), and taskInstanceId. <form> <table id="documentDetailsTable"> <tr> <td>Document Type: </td> <td><select id="documentType" ...

javascriptjqueryajaxspring-mvcspring-form

Central Player Component

Do you need help with centering text and a player on your WP site? Check out my website Here is the code I am currently using: <div class="listen_section"> <div class="container"> <div class="row"> <div class ...

htmlcsswordpress

Master your code with Rxjs optimization

Looking at a block of code: if (this.organization) { this.orgService.updateOrganization(this.createOrganizationForm.value).subscribe(() => { this.alertify.success(`Organization ${this.organization.name} was updated`); this.dialogRef.close(true ...

javascriptangulartypescriptrxjs

Can a personalized user permission prompt be designed for HTML5 APIs?

Can a consistent custom user permission request dialog be designed for HTML5 APIs, such as geolocation or getUserMedia, to ensure uniform appearance on all browsers? ...

htmlgeolocationmultiple-browsersgetusermedia

Troubleshooting: npx create-react-app displaying errors during installation

Encountering an error while trying to install create-react-app using npx. Seeking assistance on resolving this issue. My Node.js version is v16.14.2 and npm version is 8.5.0 Installing packages. This may take a few minutes. Installing react, react-dom, a ...

javascriptreactjsnpmnpx

A guide on invoking a Struts 2 action with a different parameter for each row in a jQuery DataTable

Currently, I am working on a JAVAEE project that involves the use of Struts 2 and jQuery DataTable. In this project, I need to add a link with each row in the DataTable that will call an action based on the row's ID. Below is the HTML code for this s ...

javascriptjqueryajaxdatatablestruts2

Node.js - updating the value of a exported integer variable

In my file A.js, I have defined a module-level variable called activeCount and exported it using module.exports. In another file named testA.js, I am attempting to access and modify the value of activeCount. Despite my efforts, changes made to activeCount ...

javascriptnode.js

What are the best methods for efficiently extracting web page content that is nested within HTML pages under the `<body>` tag?

Is there a way to easily extract embedded content like images, PDFs, videos, and documents from HTML web pages without including CSS, CSS background images, or JavaScript? I am in the process of migrating content from an old site to a new site and need to ...

cssxhtml

What are some techniques for transforming text into JSON format?

Beginner inquiry: I'm struggling with manipulating text using JavaScript. Here is the text I want to transform: "5555 55:55: John: New York 6666 66:66: Jack: Los Angeles" My desired output after manipulation: [{ name:"John", address:"New York", n ...

javascriptjsontextfiltering

The Chrome extension is unable to add text to the existing window

Lately, I've been attempting to develop an extension that will automatically add a div to the beginning of the current page. I've been following the guide provided on this https://developer.chrome.com/extensions/activeTab page. The code from the ...

javascriptjquerygoogle-chrome-extension

I am encountering issues with setting a background image in Bootstrap 3.1.1 while trying to achieve a par

I'm struggling to add a background image to my bootstrap site. I'm attempting to create a parallax site using stellar.js, and while the site is functional with text on each slide and correct scrolling links, the images just won't load. Despi ...

cssimagetwitter-bootstraptwitter-bootstrap-3parallax

Tips for stopping slide transition (moving to a different slide) in vue-slick-carousel?

I'm utilizing vue-slick-carousel to populate schedule data for a specific slide (in this case, a month). <vue-slick-carousel @afterChange="afterChange" @beforeChange="beforeChange" @swipe="swipe" class="te ...

javascriptjqueryvue.jsvuejs2

What is causing this JavaScript function to output '2'?

Recently, I came across an unusual JavaScript function: (function f(){ function f(){ return 1; } return f(); function f(){ return 2; } })(); To my surprise, it returns 2 instead of crashing the browsers as expected due to recursion. Curious ...

javascript

I would appreciate your assistance in understanding how to utilize the Array concat() method in my code, and I am

I need help understanding how to use the Array concat() method and how to write pure JavaScript code according to the ECMA-262 standard. Assume O is the object we are working with. Let A be the new array created based on O with a length of 0. Set the ini ...

javascript

Guide on implementing automatic callbacks with AJAX

I am facing an issue with my index page that has one input tag and one division. There is an ajax function that retrieves data from the server, but I am encountering a problem. When I enter a single letter, it returns 3 records. Then, if I add another lett ...

javascriptjqueryhtmlajax

JavaScript not redirecting to HTML page as expected

I have developed a basic login page that makes an Ajax request to the backend. However, I am experiencing difficulties with redirecting the page upon successful login. The redirect function only seems to work 1 in 15 times, and I'm unsure of the reaso ...

javascripthtmlajax