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="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Web site to manage keycloak" /> <meta name="description" content="Web site to manage keycloak" />
<title>Keycloak Administration Console</title> <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> </head>
<body style="height: 100%;"> <body style="height: 100%;">
<div id="app" style="height: 100%"> <div id="app" style="height: 100%">
<div> <div class="container container-fluid" id="load-container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" <div class="keycloak__loading-container">
style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;" width="200px" <span class="pf-c-spinner pf-m-xl" role="progressbar" aria-valuetext="Loading...">
height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"> <span class="pf-c-spinner__clipper"></span>
<path d="M10 50A40 40 0 0 0 90 50A40 42 0 0 1 10 50" fill="#5DBCD2" stroke="none" <span class="pf-c-spinner__lead-ball"></span>
transform="rotate(16.3145 50 51)"> <span class="pf-c-spinner__tail-ball"></span>
<animateTransform attributeName="transform" type="rotate" dur="1s" repeatCount="indefinite" keyTimes="0;1" </span>
values="0 50 51;360 50 51"></animateTransform> <div>
</path> <p id="loading-text">Loading the admin console</p>
</svg> </div>
</div>
</div> </div>
</div> </div>