gistfile1.txt

(ns abc.styles.spinner
  (:refer-clojure
    :exclude [/])
  (:require
    [garden.def :refer [defstyles defkeyframes]]
    [garden.util :refer [space-join]]
    [garden.color :as color]
    [garden.arithmetic :refer [/]]
    [abc.styles.settings :as settings]))

(defkeyframes spinner-rotator
  [:from
   {:transform "rotate(0deg)"}]
  [:to
   {:transform "rotate(270deg)"}])

(defkeyframes spinner-dash
  [:0%
   {:stroke-dashoffset settings/rotator-offset}]
  [:50%
   {:stroke-dashoffset (/ settings/rotator-offset 4)
    :transform         "rotate(135deg)"}]
  [:100%
   {:stroke-dashoffset settings/rotator-offset
    :transform         "rotate(450deg)"}])

(defstyles spinner
  spinner-rotator
  spinner-dash
  [:.spinner
   {:animation [[spinner-rotator
                 [[settings/rotator-duration "linear" "infinite"]]]]}

   [:.path
    {:stroke-dasharray  settings/rotator-offset
     :stroke-dashoffset 0
     :transform-origin  "center"
     :stroke            (color/from-name "white")
     :animation         [[spinner-dash
                          [[settings/rotator-duration "ease-in-out" "infinite"]]]]}]])

(def rotator-offset 157)
(def rotator-duration (s 1.4))