Crafting a dynamic spinning loading animation reminiscent of RPG games using CSS and JavaScript

I want to create a spinning loading overlay similar to those in RPG games for character skills. Here is an example from WoW that I'm aiming for;

https://i.sstatic.net/UhQoY.gif

This is my attempt (my CSS skills are not quite up to par) - as you can see, it looks a bit off.

https://i.sstatic.net/dWpP9.png

If you have any ideas on how to achieve this, I'd appreciate the help!

The source is in ClojureScript, but I believe it shouldn't be a problem;

(def skill-keyframes-opa
  ((keyframes (j/lit {"0%" {:opacity "1"}
                      "50%, 100%" {:opacity "0"}}))))

(def skill-loading-wrapper
  (css (j/lit {:background :white
               :opacity 0.5
               :z-index 1
               :width 45
               :height 45
               :position :relative
               :top 2
               :left 2})))

(def skill-loading-pie
  (css (j/lit {:width "50%"
               :height "100%"
               :position :absolute
               :transform-origin "100% 50%"
               :background :grey
               :border "10px solid rgba (0, 0, 0, 0.4)"})))

(defn- skill-loading-spinner [duration]
  ((css (j/lit {:border-radius "100% 0 0 100% / 50% 0 0 50%"
                :z-index 200
                :border-right :none
                :animation (str skill-keyframes-rota " " duration "s linear infinite")}))))

(defn- skill-loading-filler [duration]
  ((css (j/lit {:border-radius "0 100% 100% 0 / 0 50% 50% 0"
                :z-index 100
                :border-left :none
                :animation (str skill-keyframes-opa " " duration "s steps(1, end) infinite reverse")
                :left "50%"
                :opacity 0}))))

(defn skill-loading-mask [duration]
  ((css (j/lit {:width "50%"
                :height "100%"
                :position :absolute
                :z-index 300
                :opacity 1
                :background :inherit
                :animation (str skill-keyframes-opa " " duration "s steps(1, end) infinite")}))))

(defn use-skill [duration]
  [:div {:class (skill-loading-wrapper)}
   [:div {:class [(skill-loading-pie) (skill-loading-spinner duration)]}]
   [:div {:class [(skill-loading-pie) (skill-loading-filler duration)]}]
   [:div {:class (skill-loading-mask duration)}]])
javascriptcsscss-animations

Answer №1

References:

@property animation should be substituted with 

style.setProperty('--cooldown', '23.4%')
javascript animation as the values from javascript are considered the most reliable source of truth.

.cooldown {
  /* altered using style.setProperty('--cooldown', '23.4%') in js */
  --cooldown: 50%;
  background: conic-gradient(
      transparent 0,
      transparent var(--cooldown),
      rgba(0, 0, 0, 0.5) var(--cooldown),
      rgba(0, 0, 0, 0.5)
  );
  animation: cooldown 1s linear infinite;
}

/* allows --cooldown to be animated for css animations */
@property --cooldown {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@keyframes cooldown {
  0% { --cooldown: 0%; }
  100% { --cooldown: 100%; }
}

/* ensures children overlap each other */
.childs-overlayed {
  height: 100px;
  width: 100px;
  border: 2px solid black;
  display: grid;
  grid-template-areas: "only";
}
.childs-overlayed > * {
  grid-area: only;
  height: 100%;
  width: 100%;
}
<div class="childs-overlayed">
  <img src="https://via.placeholder.com/100">
  <div class="cooldown"></div>
</div>

Answer №2

To achieve a better aesthetic, consider making the left overlay darker rather than light. The odd appearance may be due to the perception that the lighter overlay is placed "on top" of the darker icon.

Opting for a dark or black overlay instead would align more closely with the example provided.

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

Tips for implementing sorting and filtering with Ajax and Json in PHP and MySQL applications

Greetings! I'm a newcomer in the world of software development, currently working on a software site. I've successfully built the pages and layout using HTML, CSS, and JavaScript, which was the easy part. Now, my challenge lies in creating main c ...

phpjavascripthtmlajaxjson

In JavaScript, how do you choose the final item in a 'for' loop?

Imagine a scenario where you have a basic HTML structure with three elements and a JavaScript loop iterating through all of them. The task at hand is to specifically target and modify the last element in the list. This code snippet demonstrates a loop tha ...

javascripthtmlloops

Testing a directive that has templates all contained within a single file with script tags

I'm struggling to include my directive's templates in my Karma unit tests. The templates are all in one file within different script tags. The error message I encounter is: PhantomJS 1.9 (Linux) ERROR SyntaxError: Parse error at /var/www/html ...

javascriptunit-testingangularjskarma-runner

The functionality of DataLayer.push appears to be malfunctioning when implemented in External JavaScript

When using dataLayer.push and GTM code in external JavaScript, the dataLayer.push value does not seem to be firing properly. However, if we place the dataLayer.push and GTM code directly in HTML, the dataLayer.push value fires as expected. Take a look at ...

javascriptjquerygoogle-analyticsanalytics

Stop users from typing inside a newly inserted element in contenteditable mode

Currently, I am developing a straightforward syntax highlighter that transforms text into DOM elements with specified classes. For example, consider the following: <div contenteditable="true"> Some text. | And some other text. </div> Assum ...

javascriptselectionrangecontenteditable

Remove user from firebase with Admin SDK

I need help understanding how to remove a user from my admin panel using the Firebase Admin SDK. When attempting to delete a user, I encountered this error: Uncaught (in promise) ReferenceError: uid is not defined at eval (ManageCustomer. ...

javascriptfirebasevue.jsgoogle-cloud-firestoregoogle-admin-sdk

The click event in jQuery is being blocked by the use of "display:none

Currently, I have implemented a search box feature with search suggestions: <input id="searchBar" /> <div id="searchSuggestion"></div> The searchSuggestion div is dynamically updated using jQuery ajax whenever an input is entered (imple ...

javascriptjqueryhtml

Execute a POST request using Puppeteer

Currently, I am experimenting with JS+Puppeteer to create a script for adding items to the cart on a website. Due to heavy traffic, the website often crashes, so I want to bypass traditional clicking methods and instead send item information directly to th ...

javascriptnode.jspuppeteer

Retrieve data from the controller of the selected element on the subsequent page using AngularJS

Currently, I am in the process of developing an ecommerce platform using angularjs. In my controller, I have a list of various products structured like this: $scope.products = [ {imgLink: 'product1.jpg', name: 'Wingtip Cognac Oxford&apo ...

javascriptjqueryhtmlangularjs

invoking a Java function from JavaScript

I need assistance with calling a Java method from JavaScript, where the Java class is located on the server side. Here is an example of the Java code: public class deleteconfig { static boolean check = true; public static void initiate() { chec ...

javajavascripthtmljspjakarta-ee

Challenge encountered when trying to add overlay hover effect on image cards

Yesterday I faced a challenge with a tracking problem while trying to implement code on a w3schools webpage. The issue was with a hover effect triggering an overlay when the mouse was placed anywhere on the line, rather than just within the card area. I&ap ...

htmlcssbootstrap-4

The Jquery Autocomplete feature is not able to retrieve data from the PHP file

I am currently facing an issue with loading the source for Jquery UI Autocomplete from a PHP file that connects to a database and retrieves results in an array. Although everything seems to be functioning correctly, the Autocomplete widget is not displayin ...

javascriptphpjqueryjquery-ui-autocomplete

The striped color override feature in Bootstrap appears to be malfunctioning in Internet Explorer 8

I have come across several discussions regarding this topic with various suggestions. My current objective is to make the alternating rows in Bootstrap (2.3.2) appear darker in Internet Explorer 8. To achieve this, I attempted to override the style by impl ...

cssinternet-explorertwitter-bootstrap

AngularJS controller encounters a scoping problem within a callback function

I have created an angular application with a simple login form that can be viewed on this JSFiddle. HTML Code: <form data-ng-app="jsApDemo" data-ng-controller="loginCtrl"> <label for="username">Username:</label> <input type=" ...

javascriptangularjsangularjs-scopeng-controller

The optimal method for loading CSS and Javascript from an ajax response within a JavaScript function - Ensuring cross-browser compatibility

I am in a situation where I need jQuery to make sense of an ajax response, but due to latency reasons, I cannot load jQuery on page load. My goal is to be able to dynamically load javascipt and css whenever this ajax call is made. After reading numerous a ...

javascriptcssajax

Utilizing JavaScript libraries in a TypeScript project: A step-by-step guide

Currently, I am working on an existing TypeScript AngularJS project and looking to incorporate d3js. However, due to restrictions with the corporate proxy, I am unable to use tools for downloading or managing dependencies. As a result, I have opted for man ...

javascriptangulard3.jstypescriptwebstorm

Having trouble properly refreshing Bootstrap scrollspy that is spying on the <body> element

I've been looking at a post on Bootstrap's scrollspy component (found here). In my code, I initialize a new scrollspy to track the body element using: $("body").scrollspy({ offset: 25 }); As my code progresses, I make AJAX requests that add or ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Measuring values from table data using jQuery

Facing an issue with a jQuery script that involves creating a simple counting loop for each tr. My table structure is as shown below, and I am attempting to select the second td, multiply it by two, add it to the third td, and display the result in the fou ...

javascriptjqueryhtmlhtml-table

`How can I trigger a JavaScript event when the content of an input field is modified?`

Currently, I am working on implementing validation in JavaScript. My goal is to provide the user with an alert whenever they modify the value of an input field. <input type="text" name="onchange" id="onchange" size="35" maxlength="50" /> ...

javascripthtml

Purge the cache of CSS and JavaScript in your browser

Is there a way to clear JavaScript and CSS cache in ASP MVC without having to clear browser history? ...

javascriptcssasp.net-mvc