Skip to content

2
2018_web_app
Commit 7b31c3fa by gema
Options

añadido loading page, modificado modal save datos

parent 05f4c43e
Showing with 159 additions and 7 deletions
fuel/app/views/layout/template.twig
...@@ -28,10 +28,22 @@ ...@@ -28,10 +28,22 @@
{% include 'includes/includes_before.twig' %} {% include 'includes/includes_before.twig' %}
</head> </head>
<body> <body style="position:relative;">
<!--loading -->
<div class="se-pre-con" style="z-index:9999"></div>
<!--loading -->
<div class="cs-loader">
<div class="cs-loader-logo" >
<img src="assets/img/logos/inutralia.png" class="img-responsive-custom">
</div>
<div class="cs-loader-inner">
<label> ●</label>
<label> ●</label>
<label> ●</label>
<label> ●</label>
<label> ●</label>
<label> ●</label>
</div>
</div>
<!--menú vertical y horizontal--> <!--menú vertical y horizontal-->
{% include 'layout/menu.twig' %} {% include 'layout/menu.twig' %}
......
fuel/app/views/layout/template_dashboard.twig
...@@ -28,9 +28,22 @@ ...@@ -28,9 +28,22 @@
{% include 'includes/includes_before.twig' %} {% include 'includes/includes_before.twig' %}
</head> </head>
<body> <body style="position:relative;">
<!--loading --> <!--loading -->
<div class="se-pre-con" style="z-index:9999"></div> <div class="cs-loader">
<div class="cs-loader-logo" >
<img src="assets/img/logos/inutralia.png" class="img-responsive-custom">
</div>
<div class="cs-loader-inner">
<label> ●</label>
<label> ●</label>
<label> ●</label>
<label> ●</label>
<label> ●</label>
<label> ●</label>
</div>
</div>
<!--menú vertical y horizontal--> <!--menú vertical y horizontal-->
{% include 'layout/menu_dashboard.twig' %} {% include 'layout/menu_dashboard.twig' %}
......
fuel/app/views/modals/modal_saved.twig
...@@ -7,11 +7,11 @@ ...@@ -7,11 +7,11 @@
<div class="modal-body"> <div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<div class="text-center"> <div class="text-center">
<i class="fa fa-save fa-5x color-other"></i> <img src="assets/img/save.png" class="img-responsive-custom"/>
</div> </div>
<div class="content text-center pb40"> <div class="content text-center pb40">
<h1>Se han guardado los datos correctamente</h1> <h2>LOS DATOS SE HAN GUARDADO CORRECTAMENTE</h2>
</div> </div>
</div> </div>
......
public/assets/css/custom.css
...@@ -542,6 +542,125 @@ a:focus { ...@@ -542,6 +542,125 @@ a:focus {
} }
/*----------------------------------------------GIF CARGA DE PAGINA----------------------*/
.cs-loader {
z-index: 9999;
/*background-color:rgba(255, 181, 18, 0.6);*/
background-color:rgba(0, 0, 0, 0.8);
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.cs-loader-logo {
position:absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align:center;
top:250px;
}
.cs-loader-inner {
transform: translateY(-50%);
top: 350px;
/*position: absolute;*/
width: calc(100% - 200px);
color: #FFF;
padding: 0 100px;
text-align: center;
position:absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
.cs-loader-inner label {
font-size: 20px;
opacity: 0;
display:inline-block;
}
@keyframes lol {
0% {
opacity: 0;
transform: translateX(-300px);
}
33% {
opacity: 1;
transform: translateX(0px);
}
66% {
opacity: 1;
transform: translateX(0px);
}
100% {
opacity: 0;
transform: translateX(300px);
}
}
@-webkit-keyframes lol {
0% {
opacity: 0;
-webkit-transform: translateX(-300px);
}
33% {
opacity: 1;
-webkit-transform: translateX(0px);
}
66% {
opacity: 1;
-webkit-transform: translateX(0px);
}
100% {
opacity: 0;
-webkit-transform: translateX(300px);
}
}
.cs-loader-inner label:nth-child(6) {
-webkit-animation: lol 3s infinite ease-in-out;
animation: lol 3s infinite ease-in-out;
}
.cs-loader-inner label:nth-child(5) {
-webkit-animation: lol 3s 100ms infinite ease-in-out;
animation: lol 3s 100ms infinite ease-in-out;
}
.cs-loader-inner label:nth-child(4) {
-webkit-animation: lol 3s 200ms infinite ease-in-out;
animation: lol 3s 200ms infinite ease-in-out;
}
.cs-loader-inner label:nth-child(3) {
-webkit-animation: lol 3s 300ms infinite ease-in-out;
animation: lol 3s 300ms infinite ease-in-out;
}
.cs-loader-inner label:nth-child(2) {
-webkit-animation: lol 3s 400ms infinite ease-in-out;
animation: lol 3s 400ms infinite ease-in-out;
}
.cs-loader-inner label:nth-child(1) {
-webkit-animation: lol 3s 500ms infinite ease-in-out;
animation: lol 3s 500ms infinite ease-in-out;
}
/*********************************************LOGIN***********************************************************************************/ /*********************************************LOGIN***********************************************************************************/
/*.box-login {*/ /*.box-login {*/
......
public/assets/js/main.js
/*------------------------------------------*/
/*---------------LOADING--------------------*/
/*--------------------------------------------*/
$(window).load(function() {
// Animate loader off screen
$(".cs-loader").fadeOut("slow");
});
/*----------------------------------------------------*/ /*----------------------------------------------------*/
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment