Today I am going to put together how to make a loading iconLiveComponent forPhoenix LiveView.
Get a loader CSS
First, I look for an open-source loader CSS because I am poor at designing and writing CSS. Luke Haas'sSingle Element CSS Spinners is nice.
Make a loader CSS file
I createassets/css/_loader.scss file in my phoenix project and paste the loader CSS into that file.
I make sure that my loader CSS file is imported intoassets/css/app.scss file.
+ @import 'loader';Make a loading icon component
First I makelib/mnishiguchi_web/live/components/loading_component.ex file. I make the component configurable for the CSS class name bacause I might want to use different loaders in different locations.
defmoduleMnishiguchiWeb.LoadingComponentdo@moduledoc""" Shows a loading icon. ## Examples <%= live_component @socket, MnishiguchiWeb.LoadingComponent, class: "loader7" %> <%= live_component @socket, MnishiguchiWeb.LoadingComponent, loading: @loading, class: "loader7" %> <%= live_component @socket, MnishiguchiWeb.LoadingComponent, loading: !connected?(@socket), class: "loader7" %> """useMnishiguchiWeb,:live_component@default_assigns%{loading:true,class:"loader"}@implPhoenix.LiveComponentdefupdate(assigns,socket)dosocket=socket|>assign(@default_assigns)|>assign(assigns){:ok,socket}end@implPhoenix.LiveComponentdefrender(assigns)do~L""" <%= if @loading do %> <divo"><%=@class%>"> Loading... </div> <% end %> """endendThat's it!
Top comments(0)
Subscribe
For further actions, you may consider blocking this person and/orreporting abuse
