github.com/pf-qiu/concourse/v6@v6.7.3-0.20201207032516-1f455d73275f/web/elm/src/Views/Spinner.elm (about)

     1  --  Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
     2  --  This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
     3  --  The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
     4  --  The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
     5  --  Code distributed by Google as part of the polymer project is also
     6  --  subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
     7  
     8  
     9  module Views.Spinner exposing (hoverableSpinner, spinner)
    10  
    11  import Html exposing (Html)
    12  import Html.Attributes exposing (style)
    13  import Html.Events exposing (onMouseEnter, onMouseLeave)
    14  import Message.Message exposing (DomID, Message(..))
    15  
    16  
    17  spinner : { sizePx : Float, margin : String } -> Html Message
    18  spinner { sizePx, margin } =
    19      hoverableSpinner { sizePx = sizePx, margin = margin, hoverable = Nothing }
    20  
    21  
    22  hoverableSpinner :
    23      { sizePx : Float, margin : String, hoverable : Maybe DomID }
    24      -> Html Message
    25  hoverableSpinner { sizePx, margin, hoverable } =
    26      Html.div
    27          -- preloader-wrapper active
    28          ([ style "width" <| String.fromFloat sizePx ++ "px"
    29           , style "height" <| String.fromFloat sizePx ++ "px"
    30           , style "box-sizing" "border-box"
    31           , style "animation" "container-rotate 1568ms linear infinite"
    32           , style "margin" margin
    33           ]
    34              ++ (case hoverable of
    35                      Just h ->
    36                          [ onMouseEnter <| Hover <| Just h
    37                          , onMouseLeave <| Hover Nothing
    38                          ]
    39  
    40                      Nothing ->
    41                          []
    42                 )
    43          )
    44          [ Html.div
    45              -- spinner-layer spinner-blue-only
    46              [ style "height" "100%"
    47              , style "border-color" "white"
    48              , style "animation" "fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both"
    49              ]
    50              [ Html.div
    51                  -- circle-clipper left
    52                  [ style "position" "relative"
    53                  , style "width" "50%"
    54                  , style "height" "100%"
    55                  , style "overflow" "hidden"
    56                  , style "border-color" "inherit"
    57                  , style "float" "left"
    58                  ]
    59                  [ Html.div
    60                      -- circle
    61                      [ style "width" "200%"
    62                      , style "border-width" "2px"
    63                      , style "box-sizing" "border-box"
    64                      , style "border-style" "solid"
    65                      , style "border-color" "inherit"
    66                      , style "border-bottom-color" "transparent"
    67                      , style "border-radius" "50%"
    68                      , style "position" "absolute"
    69                      , style "top" "0"
    70                      , style "bottom" "0"
    71                      , style "left" "0"
    72                      , style "border-right-color" "transparent"
    73                      , style "transform" "rotate(129deg)"
    74                      , style "animation" "left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both"
    75                      ]
    76                      []
    77                  ]
    78              , Html.div
    79                  -- circle-clipper right
    80                  [ style "position" "relative"
    81                  , style "width" "50%"
    82                  , style "height" "100%"
    83                  , style "overflow" "hidden"
    84                  , style "border-color" "inherit"
    85                  , style "float" "right"
    86                  ]
    87                  [ Html.div
    88                      -- circle
    89                      [ style "width" "200%"
    90                      , style "border-width" "2px"
    91                      , style "box-sizing" "border-box"
    92                      , style "border-style" "solid"
    93                      , style "border-color" "inherit"
    94                      , style "border-bottom-color" "transparent"
    95                      , style "border-radius" "50%"
    96                      , style "position" "absolute"
    97                      , style "top" "0"
    98                      , style "bottom" "0"
    99                      , style "left" "-100%"
   100                      , style "border-left-color" "transparent"
   101                      , style "transform" "rotate(-129deg)"
   102                      , style "animation" "right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both"
   103                      ]
   104                      []
   105                  ]
   106              ]
   107          ]