javascript - how to stop loading animation once the screen is loaded -

- 

@import url(http://fonts.googleapis.com/css?family=play:400,700);  * {    box-sizing: border-box;  }    body {    background-color: #222;    font-family: "play";  }    h1 {    font-size: 2rem;    color: #fff;    text-align: center;    text-transform: uppercase;  }    .smart-glass {    position: absolute;    margin: auto;    left: 0;    top: 0;    right: 0;    bottom: 0;    width: 288px;    height: 388px;  }    .logo {    width: 288px;    height: 288px;    position: relative;  }    .circle {    padding: 20px;    border: 6px solid transparent;    border-top-color: #40a800;    border-radius: 50%;    width: 100%;    height: 100%;    animation: connect 2.5s linear infinite;  }    .xbox {    background: #fff;    width: 80px;    height: 80px;    border-radius: 100%;    overflow: hidden;    position: absolute;    top: 0;    right: 0;    left: 0;    bottom: 0;    margin: auto;  }  .xbox:after, .xbox:before {    content: "";    display: block;    border-top: 10px solid #222;    border-radius: 50%;    height: 90%;    width: 120%;    transform: rotate(-45deg);    position: absolute;    right: -30%;    top: 15%;  }  .xbox:before {    left: -30%;    transform: rotate(45deg);  }    .loading-text {    text-transform: uppercase;    color: #fff;    text-align: center;    margin: 10px 0;    font-size: 1.4rem;  }    @keyframes connect {    0% {      transform: rotate(0deg);    }    100% {      transform: rotate(-360deg);    }  }
<div class="smart-glass">    <h1>xbox</h1>    <div class="logo">      <div class="circle">        <div class="circle">            <div class="circle">            </div>        </div>    </div>    <div class="hold-x">      <div class="xbox"></div>     </div>    </div>    <div class="loading-text">      loading...    </div>  </div>

well saw loading animation on 1 website , planning insert code problem having how stop animation once page has completed loading. highly appreciated

you can first fadeout animated part , removethe dom content of it

 $(".smart-glass").fadeout(3000,function(){  // fade out in 3 secs   $(".smart-glass").remove();   // animated part removed dom   $('body').css('background-color',"#fff"); // background changed white  }) })

plunker


Comments

Post a Comment

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

-
i have spring project , try make use spring boot , run @ embadded tomcat following : https://spring.io/guides/gs/rest-service/ this application //@configuration //@enableaspectjautoproxy @springbootapplication @componentscan(basepackages = "gux.prome") public class application { public static void main(string[] args) { springapplication.run(application.class, args); } } if use maven command: mvn spring-boot:run , project starts fine, need debug , run main method @ intelij, exception occurs: exception in thread "main" java.lang.illegalargumentexception: cannot instantiate interface org.springframework.context.applicationlistener : org.springframework.boot.logging.classpathloggingapplicationlistener @ org.springframework.boot.springapplication.createspringfactoriesinstances(springapplication.java:414) @ org.springframework.boot.springapplication.getspringfactoriesinstances(springapplication.java:394) @ org.springframework.bo...
Read more

reactjs - React router and this.props.children - how to pass state to this.props.children -

-
i'm using react-router first time , don't know how think in yet. here's how i'm loading components in nested routes. entry point .js reactdom.render( <router history={hashhistory} > <route path="/" component={app}> <route path="models" component={content}> </route> </router>, document.getelementbyid('app') ); app.js render: function() { return ( <div> <header /> {this.props.children} </div> ); } so child of app content component sent in. i'm using flux , app.js has state , listens changes, don't know how pass state down this.props.children. before using react-router app.js defines children explicitly, passing state natural don't see how now. using couple of react helper methods can add state, props , whatever else this.props.children render: function() { var children = react.ch...
Read more

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -

-
i have excel workbook used generate quotations customers. there main page user inputs data, , there buttons generate various pdfs , send them customer. however, 1 user consistently getting error preventing generating , sending pdfs. i beleive "microsoft windows common controls 6.0 (sp6)". it's installed on users' computers. on mine, location "c:\windows\syswow64\mscomctl.ocx" on others "c:\windows\system32\mscomctl.ocx" the user experiencing issues on 32-bit machine, "mscomctl.ocx" file should in system32. have manually put in there, , pointed common controls reference in vba it. issue seems keep reverting looking in syswow64. since folder doesn't exist, can't find it, , can't produce pdfs. i thought perhaps issue user running older version of office (2007) there users on 2013 , 2016. thought perhaps mixture of 64-bit , 32-bit users. user gets sent workbook other users (as quotation process goes further, gets passed ...
Read more