Simple progress bar. #ClojureScript #React #Reframe #Reagent

progress-bar.cljs

(ns xxx.components.progress-bar
  (:require [re-frame.core :refer [subscribe dispatch]]))

(def COLOR "rgb(178, 34, 34)")
(def VISIBLE-STYLE {:height 2 :opacity 1 :color COLOR :background-color COLOR })
(def PRGORESS-BAR-CONTAINER-STYLE {:position "fixed"
                                   :margin   0
                                   :padding  0
                                   :top      0
                                   :left     0
                                   :right    0
                                   :z-index  99999})

(def PRGORESS-BAR-STYLE {:margin 0
                         :padding 0
                         :z-index 99998
                         :box-shadow "0 0 10px 0"
                         :height 2
                         :opacity 0
                         :transition "all 0.5s ease-in-out"})

(defn increment [progress]
  (swap! progress + (* 0.15 (js/Math.pow (- 1 (js/Math.sqrt (- 100 @progress))) 2))))

(defn finish [progress incrementer pending-requests-count previous-pending-requests-count]
  (reset! previous-pending-requests-count pending-requests-count)
  (if @incrementer (js/clearInterval @incrementer))
  (reset! incrementer nil)
  (reset! progress 0))

(defn start [progress incrementer]
  (reset! incrementer (js/setInterval #(increment progress) 200)))

(defn container
  ([progress] (container progress VISIBLE-STYLE))
  ([progress style]
   [:div {:style PRGORESS-BAR-CONTAINER-STYLE}
    [:div {:style (merge PRGORESS-BAR-STYLE {:width (str progress "%")} style)}]]))

(defn restart [progress incrementer pending-requests-count previous-pending-requests-count]
  (finish progress incrementer pending-requests-count previous-pending-requests-count )
  (start progress incrementer))

(defn render []
  (let [pending-requests-count (subscribe [:pending-requests-count])
        previous-count (reagent.core/atom @pending-requests-count)
        progress (reagent.core/atom 0)
        incrementer (reagent.core/atom nil)]
    (fn []
      (if (> (- @pending-requests-count @previous-count) 0)
        (restart progress incrementer @pending-requests-count previous-count))

      (if (> @pending-requests-count 0)
        (container @progress)
        (if (> @progress 0)
          (do
            (finish progress incrementer @pending-requests-count previous-count)
            (container @progress {:height 0 :opacity 0})))))))