libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases 1 Packages Activity Actions

use patternfly style loading spinner

Browse source
This commit is contained in:
Erik Jan de Wit 2020-08-06 11:37:24 +02:00
parent d6f2a014bf
commit 04f3c001f1
1 changed files with 44 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
public/index.html
View file

@ -8,20 +8,54 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Web site to manage keycloak" />
<title>Keycloak Administration Console</title>
<style>
.container,
.container-fluid,
#load-container {
padding: 0;
margin: 0;
}
.container,
.container-fluid,
#load-container {
width: 100vw;
}
.keycloak__loading-container {
height: 100vh;
width: 100%;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 0;
}
#loading-text {
z-index: 1000;
font-size: 20px;
font-weight: 600;
padding-top: 32px;
}
</style>
</head>
<body style="height: 100%;">
<div id="app" style="height: 100%">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;" width="200px"
height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<path d="M10 50A40 40 0 0 0 90 50A40 42 0 0 1 10 50" fill="#5DBCD2" stroke="none"
transform="rotate(16.3145 50 51)">
<animateTransform attributeName="transform" type="rotate" dur="1s" repeatCount="indefinite" keyTimes="0;1"
values="0 50 51;360 50 51"></animateTransform>
</path>
</svg>
<div class="container container-fluid" id="load-container">
<div class="keycloak__loading-container">
<span class="pf-c-spinner pf-m-xl" role="progressbar" aria-valuetext="Loading...">
<span class="pf-c-spinner__clipper"></span>
<span class="pf-c-spinner__lead-ball"></span>
<span class="pf-c-spinner__tail-ball"></span>
</span>
<div>
<p id="loading-text">Loading the admin console</p>
</div>
</div>
</div>
</div>