Как создать оверлей с вращающейся загрузкой, как в ролевой игре, на CSS/JavaScript?

Я пытаюсь создать оверлей с вращающейся загрузкой, как в ролевых играх, для навыков персонажа. Вот пример из WoW (мне нужно именно так);

Это моя попытка (оказалось, что мои навыки CSS не так сильны) - как вы можете видеть, она выглядит странно.

Любые идеи о том, как это сделать, спасибо!

Источник в ClojureScript, но я думаю, это не должно быть проблемой;

(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)}]])