Packages
mbta_metro
0.0.52
1.1.2
1.1.1
1.1.0
1.0.1
1.0.0
0.3.3
0.3.2
0.3.1
0.3.0
0.2.4
0.2.3
0.2.2
0.2.1
0.2.0
0.1.21
0.1.20
0.1.19
0.1.18
0.1.17
0.1.16
0.1.15
0.1.14
0.1.13
0.1.12
0.1.11
0.1.10
0.1.9
0.1.8
0.1.7
0.1.6
0.1.5
0.1.4
0.1.3
0.1.2
0.1.1
0.1.0
0.0.65
0.0.64
0.0.62
0.0.61
0.0.60
0.0.58
0.0.57
0.0.56
0.0.55
0.0.54
0.0.53
0.0.52
0.0.51
0.0.50
0.0.49
0.0.48
0.0.47
0.0.46
0.0.45
0.0.44
0.0.43
0.0.42
0.0.41
0.0.40
0.0.39
0.0.34
0.0.30
0.0.27
0.0.20
0.0.19
0.0.18
0.0.17
0.0.16
0.0.15
0.0.14
0.0.13
0.0.12
0.0.11
0.0.10
0.0.9
0.0.8
0.0.7
0.0.6
0.0.5
0.0.4
0.0.3
0.0.2
0.0.1
0.0.1-alpha
A Phoenix LiveView component library
Current section
Files
Jump to
Current section
Files
lib/mbta_metro/components/progress.ex
defmodule MbtaMetro.Components.Progress do
@moduledoc false
use Phoenix.Component
attr :aria_label, :string, required: true
attr :color, :string, default: "blue"
attr :value, :integer, default: 0
@doc """
Creates a progress bar.
Example:
<.progress aria_label="Downloading..." color="silver" value={@download_percent} />
"""
def progress(assigns) do
~H"""
<div
class={"bg-#{@color}-100 flex w-full h-1.5 rounded-full overflow-hidden border-1"}
role="progressbar"
aria-label={@aria_label}
aria-valuenow={@value}
aria-valuemin="0"
aria-valuemax="100"
>
<div
class={"bg-#{@color}-500 flex flex-col justify-center rounded-full overflow-hidden text-xs text-white text-center whitespace-nowrap transition duration-500"}
style={"width: #{@value}%"}
>
</div>
</div>
"""
end
end