diff options
Diffstat (limited to 'catalog-ui/app/scripts/view-models/preloading')
3 files changed, 163 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/view-models/preloading/preloading-view.html b/catalog-ui/app/scripts/view-models/preloading/preloading-view.html new file mode 100644 index 0000000000..c0512dd9ec --- /dev/null +++ b/catalog-ui/app/scripts/view-models/preloading/preloading-view.html @@ -0,0 +1,9 @@ +<div class="sdc-loading-page"> + <h1 class="caption1" translate="SIGN_IN_CAPTION"></h1> + <p class="caption2" translate="SIGN_IN_DESCRIPTION"></p> + + <div class="load-container-wrapper"> + <div class="load-container load2 animated fadeIn"><div class="loader">Loading...</div></div> + </div> + +</div> diff --git a/catalog-ui/app/scripts/view-models/preloading/preloading-view.less b/catalog-ui/app/scripts/view-models/preloading/preloading-view.less new file mode 100644 index 0000000000..b02ea54621 --- /dev/null +++ b/catalog-ui/app/scripts/view-models/preloading/preloading-view.less @@ -0,0 +1,107 @@ +/* +.sdc-loading-page { + + background-color: @main_color_l; + width: 100%; + height: 100%; + + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + h1 { + .c_5; + text-align: center; + } + + p { + display: block; + .e_4; + } + + .caption1, .caption2 { + visibility: hidden; + } + + .load-container-wrapper { + position: relative; + + .load-container { + + @background_color: #000000; + + .loader, + .loader:before, + .loader:after { + border-radius: 50%; + } + .loader:before, + .loader:after { + position: absolute; + content: ''; + } + .loader:before { + width: 5.2em; + height: 10.2em; + background: @background_color; + border-radius: 10.2em 0 0 10.2em; + top: -0.1em; + left: -0.1em; + -webkit-transform-origin: 5.2em 5.1em; + transform-origin: 5.2em 5.1em; + -webkit-animation: load2 2s infinite ease 1.5s; + animation: load2 2s infinite ease 1.5s; + } + .loader { + color: #ffffff; + font-size: 11px; + text-indent: -99999em; + margin: 0 auto; + /!*margin: 55px auto;*!/ + position: relative; + width: 10em; + height: 10em; + box-shadow: inset 0 0 0 1em; + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + } + .loader:after { + width: 5.2em; + height: 10.2em; + background: @background_color; + border-radius: 0 10.2em 10.2em 0; + top: -0.1em; + left: 5.1em; + -webkit-transform-origin: 0px 5.1em; + transform-origin: 0px 5.1em; + -webkit-animation: load2 2s infinite ease; + animation: load2 2s infinite ease; + } + @-webkit-keyframes load2 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } + @keyframes load2 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } + } + + } + +} +*/ diff --git a/catalog-ui/app/scripts/view-models/preloading/preloading-view.ts b/catalog-ui/app/scripts/view-models/preloading/preloading-view.ts new file mode 100644 index 0000000000..7127b70e3c --- /dev/null +++ b/catalog-ui/app/scripts/view-models/preloading/preloading-view.ts @@ -0,0 +1,47 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +module Sdc.ViewModels { + 'use strict'; + + interface IPreLoadingViewScope { + startZoomIn: boolean; + } + + export class PreLoadingViewModel { + + static '$inject' = ['$scope']; + constructor(private $scope:IPreLoadingViewScope){ + this.init($scope); + } + + private init = ($scope:IPreLoadingViewScope):void => { + this.animate($('.caption1'),'fadeInUp',400); + this.animate($('.caption2'),'fadeInUp',800); + }; + + private animate = (element:any, animation:string, when:number):void => { + window.setTimeout(()=>{ + element.addClass("animated " + animation); + element[0].style="visibility: visible;"; + },when); + }; + + } +} |