December 2019 – Developer Blog

UI: Common tasks

Loading spinner

index.html

<head>
	....
	<link href="lib/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="lib/css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
	<div id="app">
		<div class="d-flex justify-content-center">
			<div class="loader"></div>
		</div>
	</div>
	<script src="lib/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
	<script src="lib/bootstrap/4.4.1/js/bootstrap.bundle.min.js" type="text/javascript"></script>
	....

lib/css/style.css

.loader {
	position: fixed;
	z-index: 999;
	overflow: visible;
	margin: auto;

	border: 16px solid #f3f3f3;
	border-radius: 50%;
	border-top: 16px solid blue;

	width: 120px; height: 120px;
	top: 0; left: 0; bottom: 0; right: 0;

	-webkit-animation: spin 2s linear infinite;
	/* Safari */
	animation: spin 2s linear infinite;
}

/* Transparent Overlay */
.loader:before {
	content: '';
	display: block;
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
}

/* Safari */
@-webkit-keyframes spin {
	0%   { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
	0%   { transform: rotate(0deg);  }
	100% { transform: rotate(360deg);}
}

Rendering

How to render content

(r/render-component [content]
  (.querySelector js/document "#app"))

(r/render-component [content])
  (.-body js/document)

(defn ^:export run []
  (r/render [simple-example]
  (js/document.getElementById "app"))

(defn home-page []
  [:div
    [:h2 "Homepage!"]])

;; -------------------------
;; Initialize app

(defn mount-root []
  (reagent/render [home-page] (.getElementById js/document "app")))

(defn init! []
  (mount-root))

Render several html tags as one

(defn content-row
    ""
    [col1 col2 col3]
    [:<>
        [:div.grid-item col1]
        [:div.grid-item col2]
        [:div.grid-item col3]])