simpleui tutorial examples docs source

Progress Bar

This example shows how to implement a smoothly scrolling progress bar. We start with an intial state with a button that issues a POST to start to begin the job:

(defn- progress [width]
  [:div.progress
    [:div#pb.progress-bar {:style (str "width:" width "%")}]])

(defcomponent ^:endpoint start [req ^:double width]
  (let [width (if width (-> width (+ (rand 30)) (min 100)) 0)]
    (if (= width 100)
      [:div {:hx-target "this"}
        [:h3 "Complete"]
        (progress 100)
        [:button.btn {:hx-post "start"} "Restart"]]
      [:div {:hx-target "this"
             :hx-get "start"
             :hx-trigger "load delay:600ms"
             :hx-vals {:width width}}
        [:h3 "Running"]
        (progress width)])))

(def ring-handler
  (fn [req]
    ;; page renders initial html
    (page
      start
      [:div {:style "height: 200px"}
        [:div {:hx-target "this"}
          [:h3 "Start Progress"]
          [:button.btn {:hx-post "start"} "Start Job"]]])))

Start Progress