Feel The Force with a Lightsaber Pre-Loader

Feel The Force with a Lightsaber Pre-Loader

Happy Star Wars Day everybody! Show your loyalty to the Rebel Alliance or straight up rep The Darkside with a lightsaber website pre-loader, available in blue and red.

darkside_per_loader
  • Google+
  • Facebook
  • Twitter

Just add the relevant CSS snippets to your style sheets or theme options. Both options have been tested and should work flawlessly on any WordPress site.

The Alliance

@media(min-width:480px) {
body:after {
 position: absolute;
 display: block;
 content: url(//divi.space/wp-content/uploads/2016/05/lightsaber-handle-1.png);
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 padding-top: 45vh;
 background: #fefefe;
 -webkit-animation: saber 5s forwards;
 animation: saber 5s forwards;
}

body:before {
 position: absolute;
 display: block;
 content: "";
 top: calc(45vh + 20px);
 left: 277px;
 height: 25px;
 background: #0999EC;
 z-index: 9999999;
 border-radius: 0 12px 12px 0;
 -webkit-animation: force 5s forwards;
 animation: force 5s forwards;
 -webkit-box-shadow: 21px 0px 100px 1px rgba(9,153,236,1);
 -moz-box-shadow: 21px 0px 100px 1px rgba(9,153,236,1);
 box-shadow: 21px 0px 100px 1px rgba(9,153,236,1);
}
}

@-webkit-keyframes force {
 0% { right: 85%; }
 90% { right: 5%; opacity: 1; }
 100% { right: 5%; opacity: 0;}
}

@-webkit-keyframes saber {
 0% { opacity: 1; z-index: 999999; }
 90% { opacity: 1; z-index: 999999; }
 100% { opacity: 0; z-index: -10; }
}

@keyframes force {
 0% { right: 85%; }
 90% { right: 5%; opacity: 1; }
 100% { right: 5%; opacity: 0;}
}

@keyframes saber {
 0% { opacity: 1; z-index: 999999; }
 90% { opacity: 1; z-index: 999999; }
 100% { opacity: 0; z-index: -10; }
}

 

The Darkside

@media(min-width:480px) {
body:after {
 position: absolute;
 display: block;
 content: url(//divi.space/wp-content/uploads/2016/05/lightsaber-handle-1.png);
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 padding-top: 45vh;
 background: #fefefe;
 -webkit-animation: saber 5s forwards;
 animation: saber 5s forwards;
}

body:before {
 position: absolute;
 display: block;
 content: "";
 top: calc(45vh + 20px);
 left: 277px;
 height: 25px;
 background: #F83232;
 z-index: 9999999;
 border-radius: 0 12px 12px 0;
 -webkit-animation: force 5s forwards;
 animation: force 5s forwards;
 -webkit-box-shadow: 22px 1px 100px 0px rgba(248,50,50,1);
 -moz-box-shadow: 22px 1px 100px 0px rgba(248,50,50,1);
 box-shadow: 22px 1px 100px 0px rgba(248,50,50,1);
}
}

@-webkit-keyframes force {
 0% { right: 85%; }
 90% { right: 5%; opacity: 1; }
 100% { right: 5%; opacity: 0;}
}

@-webkit-keyframes saber {
 0% { opacity: 1; z-index: 999999; }
 90% { opacity: 1; z-index: 999999; }
 100% { opacity: 0; z-index: -10; }
}

@keyframes force {
 0% { right: 85%; }
 90% { right: 5%; opacity: 1; }
 100% { right: 5%; opacity: 0;}
}

@keyframes saber {
 0% { opacity: 1; z-index: 999999; }
 90% { opacity: 1; z-index: 999999; }
 100% { opacity: 0; z-index: -10; }
}

 

Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.