module Dashi.Components.Spinner where import Dashi.Prelude import Miso.Html.Property import Miso.Svg.Element import Miso.Svg.Property data Spinner = Spinner instance Widget Spinner model action where widget' :: [Attribute action] -> Spinner -> View model action widget' [Attribute action] attrs Spinner Spinner = [Attribute action] -> [View model action] -> View model action forall action model. [Attribute action] -> [View model action] -> View model action svg_ ( [ MisoString -> Attribute action forall action. MisoString -> Attribute action width_ MisoString "24" , MisoString -> Attribute action forall action. MisoString -> Attribute action height_ MisoString "24" , MisoString -> Attribute action forall action. MisoString -> Attribute action stroke_ MisoString "currentColor" , MisoString -> Attribute action forall action. MisoString -> Attribute action viewBox_ MisoString "0 0 24 24" , MisoString -> Attribute action forall action. MisoString -> Attribute action class_ MisoString "spinner" ] [Attribute action] -> [Attribute action] -> [Attribute action] forall a. Semigroup a => a -> a -> a <> [Attribute action] attrs ) [ [Attribute action] -> [View model action] -> View model action forall action model. [Attribute action] -> [View model action] -> View model action style_ [] [ View model action ".spinner1{transform-origin:center;animation:spinner3 2s linear infinite}.spinner1 circle{stroke-linecap:round;animation:spinner2 1.5s ease-in-out infinite}@keyframes spinner3{100%{transform:rotate(360deg)}}@keyframes spinner2{0%{stroke-dasharray:0 150;stroke-dashoffset:0}47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}95%,100%{stroke-dasharray:42 150;stroke-dashoffset:-59}}" ] , [Attribute action] -> [View model action] -> View model action forall action model. [Attribute action] -> [View model action] -> View model action g_ [MisoString -> Attribute action forall action. MisoString -> Attribute action class_ MisoString "spinner1"] [ [Attribute action] -> View model action forall action model. [Attribute action] -> View model action circle_ [ MisoString -> Attribute action forall action. MisoString -> Attribute action cx_ MisoString "12" , MisoString -> Attribute action forall action. MisoString -> Attribute action cy_ MisoString "12" , MisoString -> Attribute action forall action. MisoString -> Attribute action r_ MisoString "9.5" , MisoString -> Attribute action forall action. MisoString -> Attribute action fill_ MisoString "none" , MisoString -> Attribute action forall action. MisoString -> Attribute action strokeWidth_ MisoString "3" ] ] ] style :: Css style = () -> Css forall a. a -> StyleM a forall (f :: * -> *) a. Applicative f => a -> f a pure ()