Update con aggiunta loader slide oltre a glow
This commit is contained in:
Samuele Locatelli
@@ -17,3 +17,37 @@ else
|
||||
</div>
|
||||
}
|
||||
|
||||
<hr />
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<LoadingData DisplaySize="LoadingData.CtrlSize.Small" DisplayMode="LoadingData.SpinMode.Normal"></LoadingData>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<LoadingData DisplaySize="LoadingData.CtrlSize.Small" DisplayMode="LoadingData.SpinMode.Growl"></LoadingData>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<LoadingData DisplaySize="LoadingData.CtrlSize.Small" DisplayMode="LoadingData.SpinMode.BounceLine"></LoadingData>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<LoadingData DisplaySize="LoadingData.CtrlSize.Normal" DisplayMode="LoadingData.SpinMode.Normal"></LoadingData>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<LoadingData DisplaySize="LoadingData.CtrlSize.Normal" DisplayMode="LoadingData.SpinMode.Growl"></LoadingData>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<LoadingData DisplaySize="LoadingData.CtrlSize.Normal" DisplayMode="LoadingData.SpinMode.BounceLine"></LoadingData>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<LoadingData DisplaySize="LoadingData.CtrlSize.Large" DisplayMode="LoadingData.SpinMode.Normal"></LoadingData>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<LoadingData DisplaySize="LoadingData.CtrlSize.Large" DisplayMode="LoadingData.SpinMode.Growl"></LoadingData>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<LoadingData DisplaySize="LoadingData.CtrlSize.Large" DisplayMode="LoadingData.SpinMode.BounceLine"></LoadingData>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,82 @@
|
||||
<div class="row p-3 m-2">
|
||||
<div class="col-12 text-center mt-5 py-5 alert alert-primary">
|
||||
<h3>loading data</h3>
|
||||
<i class="fas fa-spinner fa-spin fa-5x"></i>
|
||||
@if (DisplaySize == CtrlSize.Small)
|
||||
{
|
||||
<div class="@DisplayCss d-flex justify-content-around p-1 m-1">
|
||||
<div class="w-100 text-center my-1 py-1">
|
||||
<span class="mx-1">
|
||||
<b>loading data</b>
|
||||
</span>
|
||||
@if (DisplayMode == SpinMode.Normal)
|
||||
{
|
||||
<i class="fas fa-spinner fa-spin"></i>
|
||||
}
|
||||
else if (DisplayMode == SpinMode.Growl)
|
||||
{
|
||||
<div class="spinner-grow" role="status" style="width: 1.3rem; height: 1.3rem;">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="modalOrd-content-small text-center">
|
||||
<div class="loader">
|
||||
<span class="load"></span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else if (DisplaySize == CtrlSize.Normal)
|
||||
{
|
||||
<div class="@DisplayCss d-flex justify-content-around p-1 m-1">
|
||||
<div class="w-100 text-center my-1 py-1">
|
||||
<h3>loading data</h3>
|
||||
@if (DisplayMode == SpinMode.Normal)
|
||||
{
|
||||
<i class="fas fa-spinner fa-spin fa-3x"></i>
|
||||
}
|
||||
else if (DisplayMode == SpinMode.Growl)
|
||||
{
|
||||
<div class="spinner-grow" role="status" style="width: 3rem; height: 3rem;">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="modalOrd-content text-center">
|
||||
<div class="loader">
|
||||
<span class="load"></span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else if (DisplaySize == CtrlSize.Large)
|
||||
{
|
||||
<div class="row p-1 m-1">
|
||||
<div class="@DisplayCss my-3 py-3">
|
||||
<div class="col-12 text-center">
|
||||
<h1>loading data</h1>
|
||||
@if (DisplayMode == SpinMode.Normal)
|
||||
{
|
||||
<i class="fas fa-spinner fa-spin fa-5x"></i>
|
||||
}
|
||||
else if (DisplayMode == SpinMode.Growl)
|
||||
{
|
||||
<div class="spinner-grow" role="status" style="width: 5rem; height: 5rem;">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="modalOrd-content-large text-center">
|
||||
<div class="loader">
|
||||
<span class="load"></span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace EgwCoreLib.Razor
|
||||
{
|
||||
public partial class LoadingData
|
||||
{
|
||||
#region Public Enums
|
||||
|
||||
public enum CtrlSize
|
||||
{
|
||||
Normal,
|
||||
Small,
|
||||
Large
|
||||
}
|
||||
|
||||
public enum SpinMode
|
||||
{
|
||||
Normal,
|
||||
Growl,
|
||||
BounceLine
|
||||
}
|
||||
|
||||
#endregion Public Enums
|
||||
|
||||
#region Public Properties
|
||||
|
||||
/// <summary>
|
||||
/// Modalità display principale
|
||||
/// default: alert alert-primary
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public string DisplayCss { get; set; } = "alert alert-primary";
|
||||
|
||||
/// <summary>
|
||||
/// Modalità animazione
|
||||
/// default: Normal
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public SpinMode DisplayMode { get; set; } = SpinMode.Normal;
|
||||
|
||||
/// <summary>
|
||||
/// Dimensione display
|
||||
/// default: Normal
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public CtrlSize DisplaySize { get; set; } = CtrlSize.Normal;
|
||||
|
||||
#endregion Public Properties
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
.modalOrd {
|
||||
position: relative;
|
||||
z-index: 9999;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: #000000;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.loader {
|
||||
width: 5rem;
|
||||
position: relative;
|
||||
}
|
||||
.loader-text {
|
||||
position: relative;
|
||||
top: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: #C8B6FF;
|
||||
animation: text_713 3.5s ease both infinite;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.load {
|
||||
background-color: #9A79FF;
|
||||
border-radius: 3rem;
|
||||
display: block;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
bottom: 0;
|
||||
position: relative;
|
||||
transform: translateX(64px);
|
||||
animation: loading_713 3.5s ease both infinite;
|
||||
}
|
||||
.load::before {
|
||||
position: relative;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #D1C2FF;
|
||||
border-radius: inherit;
|
||||
animation: loading2_713 3.5s ease both infinite;
|
||||
}
|
||||
@keyframes text_713 {
|
||||
0% {
|
||||
letter-spacing: 1px;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
40% {
|
||||
letter-spacing: 2px;
|
||||
transform: translateX(26px);
|
||||
}
|
||||
80% {
|
||||
letter-spacing: 1px;
|
||||
transform: translateX(32px);
|
||||
}
|
||||
90% {
|
||||
letter-spacing: 2px;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
100% {
|
||||
letter-spacing: 1px;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
@keyframes loading_713 {
|
||||
0% {
|
||||
width: 16px;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
40% {
|
||||
width: 100%;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
80% {
|
||||
width: 16px;
|
||||
transform: translateX(64px);
|
||||
}
|
||||
90% {
|
||||
width: 100%;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
100% {
|
||||
width: 16px;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
@keyframes loading2_713 {
|
||||
0% {
|
||||
transform: translateX(0px);
|
||||
width: 16px;
|
||||
}
|
||||
40% {
|
||||
transform: translateX(0%);
|
||||
width: 80%;
|
||||
}
|
||||
80% {
|
||||
width: 100%;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
90% {
|
||||
width: 80%;
|
||||
transform: translateX(15px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0px);
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
/* Modal Content/Box */
|
||||
.modalOrd-content-small {
|
||||
margin: auto;
|
||||
padding-left: 20%;
|
||||
width: 50%;
|
||||
}
|
||||
.modalOrd-content {
|
||||
margin: 1.4rem auto;
|
||||
padding-left: 20%;
|
||||
width: 50%;
|
||||
}
|
||||
.modalOrd-content-large {
|
||||
margin: 2.4rem auto;
|
||||
padding-left: 20%;
|
||||
width: 50%;
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
.modalOrd {
|
||||
position: relative;
|
||||
z-index: 9999;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0,0,0);
|
||||
background-color: rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
|
||||
.loader {
|
||||
width: 5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.loader-text {
|
||||
position: relative;
|
||||
top: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: #C8B6FF;
|
||||
animation: text_713 3.5s ease both infinite;
|
||||
font-size: .8rem;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.load {
|
||||
background-color: #9A79FF;
|
||||
border-radius: 3rem;
|
||||
display: block;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
bottom: 0;
|
||||
position: relative;
|
||||
transform: translateX(64px);
|
||||
animation: loading_713 3.5s ease both infinite;
|
||||
}
|
||||
|
||||
.load::before {
|
||||
position: relative;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #D1C2FF;
|
||||
border-radius: inherit;
|
||||
animation: loading2_713 3.5s ease both infinite;
|
||||
}
|
||||
|
||||
@keyframes text_713 {
|
||||
0% {
|
||||
letter-spacing: 1px;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
|
||||
40% {
|
||||
letter-spacing: 2px;
|
||||
transform: translateX(26px);
|
||||
}
|
||||
|
||||
80% {
|
||||
letter-spacing: 1px;
|
||||
transform: translateX(32px);
|
||||
}
|
||||
|
||||
90% {
|
||||
letter-spacing: 2px;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
|
||||
100% {
|
||||
letter-spacing: 1px;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loading_713 {
|
||||
0% {
|
||||
width: 16px;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
|
||||
40% {
|
||||
width: 100%;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
|
||||
80% {
|
||||
width: 16px;
|
||||
transform: translateX(64px);
|
||||
}
|
||||
|
||||
90% {
|
||||
width: 100%;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
|
||||
100% {
|
||||
width: 16px;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loading2_713 {
|
||||
0% {
|
||||
transform: translateX(0px);
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translateX(0%);
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
80% {
|
||||
width: 100%;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
|
||||
90% {
|
||||
width: 80%;
|
||||
transform: translateX(15px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0px);
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Modal Content/Box */
|
||||
.modalOrd-content-small {
|
||||
margin: auto;
|
||||
padding-left: 20%;
|
||||
width: 50%;
|
||||
}
|
||||
.modalOrd-content {
|
||||
margin: 1.4rem auto;
|
||||
padding-left: 20%;
|
||||
width: 50%;
|
||||
}
|
||||
.modalOrd-content-large {
|
||||
margin: 2.4rem auto;
|
||||
padding-left: 20%;
|
||||
width: 50%;
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
.modalOrd{position:relative;z-index:9999;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.6);}.loader{width:5rem;position:relative;}.loader-text{position:relative;top:0;padding:0;margin:0;color:#c8b6ff;animation:text_713 3.5s ease both infinite;font-size:.8rem;letter-spacing:1px;}.load{background-color:#9a79ff;border-radius:3rem;display:block;height:1rem;width:1rem;bottom:0;position:relative;transform:translateX(64px);animation:loading_713 3.5s ease both infinite;}.load::before{position:relative;content:"";width:100%;height:100%;background-color:#d1c2ff;border-radius:inherit;animation:loading2_713 3.5s ease both infinite;}@keyframes text_713{0%{letter-spacing:1px;transform:translateX(0);}40%{letter-spacing:2px;transform:translateX(26px);}80%{letter-spacing:1px;transform:translateX(32px);}90%{letter-spacing:2px;transform:translateX(0);}100%{letter-spacing:1px;transform:translateX(0);}}@keyframes loading_713{0%{width:16px;transform:translateX(0);}40%{width:100%;transform:translateX(0);}80%{width:16px;transform:translateX(64px);}90%{width:100%;transform:translateX(0);}100%{width:16px;transform:translateX(0);}}@keyframes loading2_713{0%{transform:translateX(0);width:16px;}40%{transform:translateX(0%);width:80%;}80%{width:100%;transform:translateX(0);}90%{width:80%;transform:translateX(15px);}100%{transform:translateX(0);width:16px;}}.modalOrd-content-small{margin:auto;padding-left:20%;width:50%;}.modalOrd-content{margin:1.4rem auto;padding-left:20%;width:50%;}.modalOrd-content-large{margin:2.4rem auto;padding-left:20%;width:50%;}
|
||||
@@ -22,5 +22,9 @@
|
||||
{
|
||||
"outputFile": "CalWeekColumn.razor.css",
|
||||
"inputFile": "CalWeekColumn.razor.less"
|
||||
},
|
||||
{
|
||||
"outputFile": "LoadingData.razor.css",
|
||||
"inputFile": "LoadingData.razor.less"
|
||||
}
|
||||
]
|
||||
Reference in New Issue
Block a user