Page Transition Loader

Developer

Size

7,268 Kb

Views

32,384

Page Transition Loader Previews
Page Transition Loader HTML Codes
Page Transition Loader CSS Codes
Page Transition Loader JS Codes

How do I make an page transition loader?

New page preloader concept. SVG circle loader with morphing effect. Responsive animated wireframe.. What is a page transition loader? How do you make a page transition loader? This script and codes were developed by Arsen Zbidniakov on 13 October 2022, Thursday.

Page Transition Loader Previews

Page Transition Loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Page Transition Loader</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="page"> <div class="wrap"> <b class="box fw mb2"> <i class="img h10 dl1"></i> </b> <b class="box hw mb2"> <i class="img dl2"></i> <i class="txt w100 dl5"></i> <i class="txt w70 dl6"></i> </b> <b class="box hw mb2"> <i class="img dl4"></i> <i class="txt w100 dl7"></i> <i class="txt w70 dl8"></i> </b> <b class="box hw mb2"> <i class="img dl6"></i> <i class="txt w100 dl9"></i> <i class="txt w70 dl10"></i> </b> <b class="box hw mb2"> <i class="img dl8"></i> <i class="txt w100 dl11"></i> <i class="txt w70 dl12"></i> </b> <b class="box hw mb2"> <i class="img dl10"></i> <i class="txt w100 dl13"></i> <i class="txt w70 dl14"></i> </b> <b class="box hw mb2"> <i class="img dl12"></i> <i class="txt w100 dl15"></i> <i class="txt w70 dl16"></i> </b> <b class="box fw mb2 f0 w100"> <i class="txt ib mt0 w40 dl13"></i><i class="txt ib mt0 w20 dl14"></i><i class="txt ib mt0 w15 dl15"></i> <i class="txt ib mt0 w70 dl14"></i><i class="txt ib mt0 w20 dl15"></i> <i class="txt ib mt0 w30 dl15"></i><i class="txt ib mt0 w40 dl16"></i><i class="txt ib mt0 w10 dl17"></i> <i class="txt ib mt0 w40 dl16"></i><i class="txt ib mt0 w15 dl17"></i> </b> <b class="box fw w100"> <i class="btn w15 dl16"></i> </b> </div>
</div>
<div class="container"> <svg class="loader" viewBox="0 0 100 100" overflow="visible"> <g class="core"> <circle class="path" cx="50" cy="50" r="1" fill="none" /> </g> <g class="spinner"> <circle class="path" cx="50" cy="50" r="20" fill="none" /> </g> <g class="layer-1"> <circle class="path" cx="50" cy="50" r="70" fill="none" /> </g> <g class="layer-2"> <circle class="path" cx="50" cy="50" r="120" fill="none" /> </g> <g class="layer-3"> <circle class="path" cx="50" cy="50" r="180" fill="none" /> </g> <g class="layer-4"> <circle class="path" cx="50" cy="50" r="240" fill="none" /> </g> <g class="layer-5"> <circle class="path" cx="50" cy="50" r="300" fill="none" /> </g> <g class="layer-6"> <circle class="path" cx="50" cy="50" r="380" fill="none" /> </g> <g class="layer-7"> <circle class="path" cx="50" cy="50" r="450" fill="none" /> </g> <g class="layer-8"> <circle class="path" cx="50" cy="50" r="540" fill="none" /> </g> </svg>
</div>
<a href="https://codepen.io/ARS" target="_blank" class="ARS">codepen.io/ARS</a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Page Transition Loader - Script Codes CSS Codes

/* ------------------- # LOADER ------------------- */
.layer-1 > .path { stroke: rgba(234, 234, 234, 0.5); stroke-width: 15; stroke-dasharray: 1507.2; stroke-dashoffset: 1507.2; visibility: hidden; -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); transform: rotate(-30deg);
}
.loaded .layer-1 > .path { visibility: visible; -moz-animation: layer-1 1.25s ease-in; -webkit-animation: layer-1 1.25s ease-in; animation: layer-1 1.25s ease-in;
}
@-moz-keyframes layer-1 { 0% { stroke-dasharray: 1507.2; stroke-dashoffset: 1507.2; } 75% { stroke-width: 15; stroke-dashoffset: 753.6; } 100% { stroke: #eaeaea; stroke-width: 45; stroke-width: 225; stroke-dasharray: 1513.48; stroke-dashoffset: 0; -moz-transform: rotate(450deg); transform: rotate(450deg); }
}
@-webkit-keyframes layer-1 { 0% { stroke-dasharray: 1507.2; stroke-dashoffset: 1507.2; } 75% { stroke-width: 15; stroke-dashoffset: 753.6; } 100% { stroke: #eaeaea; stroke-width: 45; stroke-width: 225; stroke-dasharray: 1513.48; stroke-dashoffset: 0; -webkit-transform: rotate(450deg); transform: rotate(450deg); }
}
@keyframes layer-1 { 0% { stroke-dasharray: 1507.2; stroke-dashoffset: 1507.2; } 75% { stroke-width: 15; stroke-dashoffset: 753.6; } 100% { stroke: #eaeaea; stroke-width: 45; stroke-width: 225; stroke-dasharray: 1513.48; stroke-dashoffset: 0; -moz-transform: rotate(450deg); -ms-transform: rotate(450deg); -webkit-transform: rotate(450deg); transform: rotate(450deg); }
}
.layer-2 > .path { stroke: rgba(234, 234, 234, 0.3); stroke-width: 20; stroke-dasharray: 1507.2; stroke-dashoffset: 1507.2; visibility: hidden; -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); transform: rotate(-60deg);
}
.loaded .layer-2 > .path { visibility: visible; -moz-animation: layer-2 1.25s ease-in; -webkit-animation: layer-2 1.25s ease-in; animation: layer-2 1.25s ease-in;
}
@-moz-keyframes layer-2 { 0% { stroke-dasharray: 1507.2; stroke-dashoffset: 1507.2; } 75% { stroke-width: 20; stroke-dashoffset: 753.6; } 100% { stroke: #eaeaea; stroke-width: 60; stroke-dasharray: 1513.48; stroke-dashoffset: 0; -moz-transform: rotate(420deg); transform: rotate(420deg); }
}
@-webkit-keyframes layer-2 { 0% { stroke-dasharray: 1507.2; stroke-dashoffset: 1507.2; } 75% { stroke-width: 20; stroke-dashoffset: 753.6; } 100% { stroke: #eaeaea; stroke-width: 60; stroke-dasharray: 1513.48; stroke-dashoffset: 0; -webkit-transform: rotate(420deg); transform: rotate(420deg); }
}
@keyframes layer-2 { 0% { stroke-dasharray: 1507.2; stroke-dashoffset: 1507.2; } 75% { stroke-width: 20; stroke-dashoffset: 753.6; } 100% { stroke: #eaeaea; stroke-width: 60; stroke-dasharray: 1513.48; stroke-dashoffset: 0; -moz-transform: rotate(420deg); -ms-transform: rotate(420deg); -webkit-transform: rotate(420deg); transform: rotate(420deg); }
}
.layer-3 > .path { stroke: rgba(234, 234, 234, 0.8); stroke-width: 40; stroke-dasharray: 1130.4; stroke-dashoffset: 1130.4; visibility: hidden; -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -webkit-transform: rotate(-70deg); transform: rotate(-70deg);
}
.loaded .layer-3 > .path { visibility: visible; -moz-animation: layer-3 1.25s ease-in; -webkit-animation: layer-3 1.25s ease-in; animation: layer-3 1.25s ease-in;
}
@-moz-keyframes layer-3 { 0% { stroke-dasharray: 1130.4; stroke-dashoffset: 1130.4; } 75% { stroke-width: 40; stroke-dashoffset: 565.2; } 100% { stroke: #eaeaea; stroke-width: 120; stroke-dasharray: 1136.68; stroke-dashoffset: 0; -moz-transform: rotate(410deg); transform: rotate(410deg); }
}
@-webkit-keyframes layer-3 { 0% { stroke-dasharray: 1130.4; stroke-dashoffset: 1130.4; } 75% { stroke-width: 40; stroke-dashoffset: 565.2; } 100% { stroke: #eaeaea; stroke-width: 120; stroke-dasharray: 1136.68; stroke-dashoffset: 0; -webkit-transform: rotate(410deg); transform: rotate(410deg); }
}
@keyframes layer-3 { 0% { stroke-dasharray: 1130.4; stroke-dashoffset: 1130.4; } 75% { stroke-width: 40; stroke-dashoffset: 565.2; } 100% { stroke: #eaeaea; stroke-width: 120; stroke-dasharray: 1136.68; stroke-dashoffset: 0; -moz-transform: rotate(410deg); -ms-transform: rotate(410deg); -webkit-transform: rotate(410deg); transform: rotate(410deg); }
}
.layer-4 > .path { stroke: rgba(234, 234, 234, 0.6); stroke-width: 20; stroke-dasharray: 1507.2; stroke-dashoffset: 1507.2; visibility: hidden; -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg);
}
.loaded .layer-4 > .path { visibility: visible; -moz-animation: layer-4 1.25s ease-in; -webkit-animation: layer-4 1.25s ease-in; animation: layer-4 1.25s ease-in;
}
@-moz-keyframes layer-4 { 0% { stroke-dasharray: 1507.2; stroke-dashoffset: 1507.2; } 75% { stroke-width: 20; stroke-dashoffset: 753.6; } 100% { stroke: #eaeaea; stroke-width: 60; stroke-dasharray: 1513.48; stroke-dashoffset: 0; -moz-transform: rotate(390deg); transform: rotate(390deg); }
}
@-webkit-keyframes layer-4 { 0% { stroke-dasharray: 1507.2; stroke-dashoffset: 1507.2; } 75% { stroke-width: 20; stroke-dashoffset: 753.6; } 100% { stroke: #eaeaea; stroke-width: 60; stroke-dasharray: 1513.48; stroke-dashoffset: 0; -webkit-transform: rotate(390deg); transform: rotate(390deg); }
}
@keyframes layer-4 { 0% { stroke-dasharray: 1507.2; stroke-dashoffset: 1507.2; } 75% { stroke-width: 20; stroke-dashoffset: 753.6; } 100% { stroke: #eaeaea; stroke-width: 60; stroke-dasharray: 1513.48; stroke-dashoffset: 0; -moz-transform: rotate(390deg); -ms-transform: rotate(390deg); -webkit-transform: rotate(390deg); transform: rotate(390deg); }
}
.layer-5 > .path { stroke: rgba(234, 234, 234, 0.5); stroke-width: 30; stroke-dasharray: 1884; stroke-dashoffset: 1884; visibility: hidden; -moz-transform: rotate(-20deg); -ms-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); transform: rotate(-20deg);
}
.loaded .layer-5 > .path { visibility: visible; -moz-animation: layer-5 1.25s ease-in; -webkit-animation: layer-5 1.25s ease-in; animation: layer-5 1.25s ease-in;
}
@-moz-keyframes layer-5 { 0% { stroke-dasharray: 1884; stroke-dashoffset: 1884; } 75% { stroke-width: 30; stroke-dashoffset: 942; } 100% { stroke: #eaeaea; stroke-width: 90; stroke-dasharray: 1890.28; stroke-dashoffset: 0; -moz-transform: rotate(460deg); transform: rotate(460deg); }
}
@-webkit-keyframes layer-5 { 0% { stroke-dasharray: 1884; stroke-dashoffset: 1884; } 75% { stroke-width: 30; stroke-dashoffset: 942; } 100% { stroke: #eaeaea; stroke-width: 90; stroke-dasharray: 1890.28; stroke-dashoffset: 0; -webkit-transform: rotate(460deg); transform: rotate(460deg); }
}
@keyframes layer-5 { 0% { stroke-dasharray: 1884; stroke-dashoffset: 1884; } 75% { stroke-width: 30; stroke-dashoffset: 942; } 100% { stroke: #eaeaea; stroke-width: 90; stroke-dasharray: 1890.28; stroke-dashoffset: 0; -moz-transform: rotate(460deg); -ms-transform: rotate(460deg); -webkit-transform: rotate(460deg); transform: rotate(460deg); }
}
.layer-6 > .path { stroke: rgba(234, 234, 234, 0.2); stroke-width: 45; stroke-dasharray: 2386.4; stroke-dashoffset: 2386.4; visibility: hidden; -moz-transform: rotate(-80deg); -ms-transform: rotate(-80deg); -webkit-transform: rotate(-80deg); transform: rotate(-80deg);
}
.loaded .layer-6 > .path { visibility: visible; -moz-animation: layer-6 1.25s ease-in; -webkit-animation: layer-6 1.25s ease-in; animation: layer-6 1.25s ease-in;
}
@-moz-keyframes layer-6 { 0% { stroke-dasharray: 2386.4; stroke-dashoffset: 2386.4; } 75% { stroke-width: 45; stroke-dashoffset: 1193.2; } 100% { stroke: #eaeaea; stroke-width: 135; stroke-dasharray: 2392.68; stroke-dashoffset: 0; -moz-transform: rotate(400deg); transform: rotate(400deg); }
}
@-webkit-keyframes layer-6 { 0% { stroke-dasharray: 2386.4; stroke-dashoffset: 2386.4; } 75% { stroke-width: 45; stroke-dashoffset: 1193.2; } 100% { stroke: #eaeaea; stroke-width: 135; stroke-dasharray: 2392.68; stroke-dashoffset: 0; -webkit-transform: rotate(400deg); transform: rotate(400deg); }
}
@keyframes layer-6 { 0% { stroke-dasharray: 2386.4; stroke-dashoffset: 2386.4; } 75% { stroke-width: 45; stroke-dashoffset: 1193.2; } 100% { stroke: #eaeaea; stroke-width: 135; stroke-dasharray: 2392.68; stroke-dashoffset: 0; -moz-transform: rotate(400deg); -ms-transform: rotate(400deg); -webkit-transform: rotate(400deg); transform: rotate(400deg); }
}
.layer-7 > .path { stroke: #eaeaea; stroke-width: 75; stroke-dasharray: 2826; stroke-dashoffset: 2826; visibility: hidden; -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); transform: rotate(-10deg);
}
.loaded .layer-7 > .path { visibility: visible; -moz-animation: layer-7 1.25s ease-in; -webkit-animation: layer-7 1.25s ease-in; animation: layer-7 1.25s ease-in;
}
@-moz-keyframes layer-7 { 0% { stroke-dasharray: 2826; stroke-dashoffset: 2826; } 75% { stroke-width: 75; stroke-dashoffset: 1413; } 100% { stroke: #eaeaea; stroke-width: 225; stroke-dasharray: 2832.28; stroke-dashoffset: 0; -moz-transform: rotate(470deg); transform: rotate(470deg); }
}
@-webkit-keyframes layer-7 { 0% { stroke-dasharray: 2826; stroke-dashoffset: 2826; } 75% { stroke-width: 75; stroke-dashoffset: 1413; } 100% { stroke: #eaeaea; stroke-width: 225; stroke-dasharray: 2832.28; stroke-dashoffset: 0; -webkit-transform: rotate(470deg); transform: rotate(470deg); }
}
@keyframes layer-7 { 0% { stroke-dasharray: 2826; stroke-dashoffset: 2826; } 75% { stroke-width: 75; stroke-dashoffset: 1413; } 100% { stroke: #eaeaea; stroke-width: 225; stroke-dasharray: 2832.28; stroke-dashoffset: 0; -moz-transform: rotate(470deg); -ms-transform: rotate(470deg); -webkit-transform: rotate(470deg); transform: rotate(470deg); }
}
.layer-8 > .path { stroke: rgba(234, 234, 234, 0.5); stroke-width: 250; stroke-dasharray: 3391.2; stroke-dashoffset: 3391.2; visibility: hidden; -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -webkit-transform: rotate(-70deg); transform: rotate(-70deg);
}
.loaded .layer-8 > .path { visibility: visible; -moz-animation: layer-8 1.25s ease-in; -webkit-animation: layer-8 1.25s ease-in; animation: layer-8 1.25s ease-in;
}
@-moz-keyframes layer-8 { 0% { stroke-dasharray: 3391.2; stroke-dashoffset: 3391.2; } 75% { stroke-width: 250; stroke-dashoffset: 1695.6; } 100% { stroke: #eaeaea; stroke-width: 750; stroke-dasharray: 3397.48; stroke-dashoffset: 0; -moz-transform: rotate(410deg); transform: rotate(410deg); }
}
@-webkit-keyframes layer-8 { 0% { stroke-dasharray: 3391.2; stroke-dashoffset: 3391.2; } 75% { stroke-width: 250; stroke-dashoffset: 1695.6; } 100% { stroke: #eaeaea; stroke-width: 750; stroke-dasharray: 3397.48; stroke-dashoffset: 0; -webkit-transform: rotate(410deg); transform: rotate(410deg); }
}
@keyframes layer-8 { 0% { stroke-dasharray: 3391.2; stroke-dashoffset: 3391.2; } 75% { stroke-width: 250; stroke-dashoffset: 1695.6; } 100% { stroke: #eaeaea; stroke-width: 750; stroke-dasharray: 3397.48; stroke-dashoffset: 0; -moz-transform: rotate(410deg); -ms-transform: rotate(410deg); -webkit-transform: rotate(410deg); transform: rotate(410deg); }
}
.loader { position: absolute; width: 120px; height: 120px; -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); z-index: 9999;
}
.loaded .loader { -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); -moz-transition: all 2.25s ease-in-out 1.25s; -o-transition: all 2.25s ease-in-out 1.25s; -webkit-transition: all 2.25s ease-in-out; -webkit-transition-delay: 1.25s; transition: all 2.25s ease-in-out 1.25s;
}
.loader g, .loader circle { transform-origin: 50% 50%;
}
.core > .path { fill: #EF836E; visibility: hidden; -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); -moz-transition: all 0.625s ease-in-out 0.15625s; -o-transition: all 0.625s ease-in-out 0.15625s; -webkit-transition: all 0.625s ease-in-out; -webkit-transition-delay: 0.15625s; transition: all 0.625s ease-in-out 0.15625s;
}
.loaded .core > .path { -moz-animation: core-loaded 2.5s ease-in-out; -webkit-animation: core-loaded 2.5s ease-in-out; animation: core-loaded 2.5s ease-in-out;
}
@-moz-keyframes core-loaded { 0% { visibility: hidden; -moz-transform: scale(1, 1); transform: scale(1, 1); } 25%, 85% { opacity: 1; visibility: visible; -moz-transform: scale(1000, 1000); transform: scale(1000, 1000); } 100% { opacity: 0; -moz-transform: scale(1, 1); transform: scale(1, 1); }
}
@-webkit-keyframes core-loaded { 0% { visibility: hidden; -webkit-transform: scale(1, 1); transform: scale(1, 1); } 25%, 85% { opacity: 1; visibility: visible; -webkit-transform: scale(1000, 1000); transform: scale(1000, 1000); } 100% { opacity: 0; -webkit-transform: scale(1, 1); transform: scale(1, 1); }
}
@keyframes core-loaded { 0% { visibility: hidden; -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } 25%, 85% { opacity: 1; visibility: visible; -moz-transform: scale(1000, 1000); -ms-transform: scale(1000, 1000); -webkit-transform: scale(1000, 1000); transform: scale(1000, 1000); } 100% { opacity: 0; -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
}
.spinner { opacity: 1; -moz-transition: opacity 0.1s 0.1s; -o-transition: opacity 0.1s 0.1s; -webkit-transition: opacity 0.1s; -webkit-transition-delay: 0.1s; transition: opacity 0.1s 0.1s; -moz-animation: rotate 1.25s linear infinite; -webkit-animation: rotate 1.25s linear infinite; animation: rotate 1.25s linear infinite;
}
.loaded .spinner { opacity: 0;
}
.spinner > .path { stroke: #EF836E; stroke-width: 6; stroke-dasharray: 157; stroke-dashoffset: 157; -moz-animation: spinner 1.25s both infinite ease-in-out; -webkit-animation: spinner 1.25s both infinite ease-in-out; animation: spinner 1.25s both infinite ease-in-out;
}
@-moz-keyframes rotate { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(270deg); transform: rotate(270deg); }
}
@-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(270deg); transform: rotate(270deg); }
}
@keyframes rotate { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform: rotate(270deg); }
}
@-moz-keyframes spinner { 0% { stroke-dasharray: 157; stroke-dashoffset: 157; } 65% { stroke-dasharray: 157; stroke-dashoffset: 39.25; transform: rotate(135deg); } 100% { stroke-dasharray: 157; stroke-dashoffset: 157; transform: rotate(450deg); }
}
@-webkit-keyframes spinner { 0% { stroke-dasharray: 157; stroke-dashoffset: 157; } 65% { stroke-dasharray: 157; stroke-dashoffset: 39.25; transform: rotate(135deg); } 100% { stroke-dasharray: 157; stroke-dashoffset: 157; transform: rotate(450deg); }
}
@keyframes spinner { 0% { stroke-dasharray: 157; stroke-dashoffset: 157; } 65% { stroke-dasharray: 157; stroke-dashoffset: 39.25; transform: rotate(135deg); } 100% { stroke-dasharray: 157; stroke-dashoffset: 157; transform: rotate(450deg); }
}
.container { position: fixed; overflow: hidden;
}
.center, .loader, .container, .page, .btn:after, .ARS { top: 0; left: 0; right: 0; bottom: 0; margin: auto;
}
.loader, .core, .spinner, .path { -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}
/* ------------------- # PAGE ------------------- */
.page { display: flex; justify-content: center; align-items: center; position: absolute; width: 80vh;
}
.wrap { display: flex; flex-flow: row wrap; justify-content: space-around; width: 100%;
}
.img,
.txt,
.btn { display: block; position: relative; margin: 0.75vh; background: #ccc;
}
.img { width: 100%; height: 15.5vh; transform-origin: 50% 50%;
}
.txt { display: block; margin: 0.75vh; height: 0.75vh; background: #ccc; transform-origin: 0 50%;
}
.btn { height: 4vh; color: #ccc; cursor: pointer; transform-origin: 50% 50%; z-index: 1;
}
.btn:after { content: "RELOAD"; position: absolute; text-align: center; font: 700 1.5vh/4vh Verdana, sans-serif; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none;
}
.loaded .btn { color: #fff; background: #EF836E; -moz-animation: btn-loaded 0.1s both 0.5s; -webkit-animation: btn-loaded 0.1s both 0.5s; animation: btn-loaded 0.1s both 0.5s;
}
.restart .btn { color: #EF836E; background: #EF836E; -moz-animation: btn-restart 0.1s both; -webkit-animation: btn-restart 0.1s both; animation: btn-restart 0.1s both;
}
.w5 { width: 5%;
}
.w10 { width: 10%;
}
.w15 { width: 15%;
}
.w20 { width: 20%;
}
.w25 { width: 25%;
}
.w30 { width: 30%;
}
.w35 { width: 35%;
}
.w40 { width: 40%;
}
.w45 { width: 45%;
}
.w50 { width: 50%;
}
.w55 { width: 55%;
}
.w60 { width: 60%;
}
.w65 { width: 65%;
}
.w70 { width: 70%;
}
.w75 { width: 75%;
}
.w80 { width: 80%;
}
.w85 { width: 85%;
}
.w90 { width: 90%;
}
.w95 { width: 95%;
}
.w100 { width: 100%;
}
.ib { display: inline-block;
}
.fw { flex: 0 0 97%;
}
.hw { flex: 0 0 30%;
}
.mt0 { margin-top: 0;
}
.mb2 { margin-bottom: 2vh;
}
.h10 { height: 10vh;
}
.f0 { font-size: 0;
}
.new-page .img { -moz-animation: scale-in 0.3s both cubic-bezier(0.87, -0.41, 0.19, 1.44); -webkit-animation: scale-in 0.3s both cubic-bezier(0.87, -0.41, 0.19, 1.44); animation: scale-in 0.3s both cubic-bezier(0.87, -0.41, 0.19, 1.44);
}
.new-page .txt { -moz-animation: scaleX-in 0.1s both ease-out; -webkit-animation: scaleX-in 0.1s both ease-out; animation: scaleX-in 0.1s both ease-out;
}
.new-page .btn { -moz-animation: scale-in 0.3s both cubic-bezier(0.87, -0.41, 0.19, 1.44); -webkit-animation: scale-in 0.3s both cubic-bezier(0.87, -0.41, 0.19, 1.44); animation: scale-in 0.3s both cubic-bezier(0.87, -0.41, 0.19, 1.44);
}
.new-page .dl1 { -moz-animation-delay: 0.85s; -webkit-animation-delay: 0.85s; animation-delay: 0.85s;
}
.new-page .dl2 { -moz-animation-delay: 0.95s; -webkit-animation-delay: 0.95s; animation-delay: 0.95s;
}
.new-page .dl3 { -moz-animation-delay: 1.05s; -webkit-animation-delay: 1.05s; animation-delay: 1.05s;
}
.new-page .dl4 { -moz-animation-delay: 1.15s; -webkit-animation-delay: 1.15s; animation-delay: 1.15s;
}
.new-page .dl5 { -moz-animation-delay: 1.25s; -webkit-animation-delay: 1.25s; animation-delay: 1.25s;
}
.new-page .dl6 { -moz-animation-delay: 1.35s; -webkit-animation-delay: 1.35s; animation-delay: 1.35s;
}
.new-page .dl7 { -moz-animation-delay: 1.45s; -webkit-animation-delay: 1.45s; animation-delay: 1.45s;
}
.new-page .dl8 { -moz-animation-delay: 1.55s; -webkit-animation-delay: 1.55s; animation-delay: 1.55s;
}
.new-page .dl9 { -moz-animation-delay: 1.65s; -webkit-animation-delay: 1.65s; animation-delay: 1.65s;
}
.new-page .dl10 { -moz-animation-delay: 1.75s; -webkit-animation-delay: 1.75s; animation-delay: 1.75s;
}
.new-page .dl11 { -moz-animation-delay: 1.85s; -webkit-animation-delay: 1.85s; animation-delay: 1.85s;
}
.new-page .dl12 { -moz-animation-delay: 1.95s; -webkit-animation-delay: 1.95s; animation-delay: 1.95s;
}
.new-page .dl13 { -moz-animation-delay: 2.05s; -webkit-animation-delay: 2.05s; animation-delay: 2.05s;
}
.new-page .dl14 { -moz-animation-delay: 2.15s; -webkit-animation-delay: 2.15s; animation-delay: 2.15s;
}
.new-page .dl15 { -moz-animation-delay: 2.25s; -webkit-animation-delay: 2.25s; animation-delay: 2.25s;
}
.new-page .dl16 { -moz-animation-delay: 2.35s; -webkit-animation-delay: 2.35s; animation-delay: 2.35s;
}
.new-page .dl17 { -moz-animation-delay: 2.45s; -webkit-animation-delay: 2.45s; animation-delay: 2.45s;
}
.new-page .dl18 { -moz-animation-delay: 2.55s; -webkit-animation-delay: 2.55s; animation-delay: 2.55s;
}
.new-page .dl19 { -moz-animation-delay: 2.65s; -webkit-animation-delay: 2.65s; animation-delay: 2.65s;
}
.new-page .dl20 { -moz-animation-delay: 2.75s; -webkit-animation-delay: 2.75s; animation-delay: 2.75s;
}
.new-page .dl21 { -moz-animation-delay: 2.85s; -webkit-animation-delay: 2.85s; animation-delay: 2.85s;
}
.new-page .dl22 { -moz-animation-delay: 2.95s; -webkit-animation-delay: 2.95s; animation-delay: 2.95s;
}
.new-page .dl23 { -moz-animation-delay: 3.05s; -webkit-animation-delay: 3.05s; animation-delay: 3.05s;
}
.new-page .dl24 { -moz-animation-delay: 3.15s; -webkit-animation-delay: 3.15s; animation-delay: 3.15s;
}
.new-page .dl25 { -moz-animation-delay: 3.25s; -webkit-animation-delay: 3.25s; animation-delay: 3.25s;
}
.new-page .dl26 { -moz-animation-delay: 3.35s; -webkit-animation-delay: 3.35s; animation-delay: 3.35s;
}
.new-page .dl27 { -moz-animation-delay: 3.45s; -webkit-animation-delay: 3.45s; animation-delay: 3.45s;
}
.new-page .dl28 { -moz-animation-delay: 3.55s; -webkit-animation-delay: 3.55s; animation-delay: 3.55s;
}
.new-page .dl29 { -moz-animation-delay: 3.65s; -webkit-animation-delay: 3.65s; animation-delay: 3.65s;
}
.new-page .dl30 { -moz-animation-delay: 3.75s; -webkit-animation-delay: 3.75s; animation-delay: 3.75s;
}
@-moz-keyframes scaleX-in { from { -moz-transform: scaleX(0); transform: scaleX(0); } to { -moz-transform: scaleX(1); transform: scaleX(1); }
}
@-webkit-keyframes scaleX-in { from { -webkit-transform: scaleX(0); transform: scaleX(0); } to { -webkit-transform: scaleX(1); transform: scaleX(1); }
}
@keyframes scaleX-in { from { -moz-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); } to { -moz-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); }
}
@-moz-keyframes scale-in { from { -moz-transform: scale(0); transform: scale(0); } to { -moz-transform: scale(1); transform: scale(1); }
}
@-webkit-keyframes scale-in { from { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes scale-in { from { -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); } to { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
}
@-moz-keyframes btn-loaded { from { color: #ccc; background: #ccc; } to { color: #fff; background: #EF836E; }
}
@-webkit-keyframes btn-loaded { from { color: #ccc; background: #ccc; } to { color: #fff; background: #EF836E; }
}
@keyframes btn-loaded { from { color: #ccc; background: #ccc; } to { color: #fff; background: #EF836E; }
}
@-moz-keyframes btn-restart { from { color: #EF836E; background: #EF836E; } to { color: #ccc; background: #ccc; }
}
@-webkit-keyframes btn-restart { from { color: #EF836E; background: #EF836E; } to { color: #ccc; background: #ccc; }
}
@keyframes btn-restart { from { color: #EF836E; background: #EF836E; } to { color: #ccc; background: #ccc; }
}
body { background: #eaeaea;
}
body:not(.loaded) *:not(.spinner, .spinner > .path) { -moz-animation: none !important; -webkit-animation: none !important; animation: none !important;
}
.ARS { display: inline-block; position: fixed; top: auto; bottom: 1vh; color: #ccc; text-align: center; text-decoration: none; font-family: Verdana, sans-serif; font-size: 12px; font-weight: 700; -moz-transform: translateY(10vh); -ms-transform: translateY(10vh); -webkit-transform: translateY(10vh); transform: translateY(10vh); -moz-transition: all 0.5s cubic-bezier(0.87, -0.41, 0.19, 1.44); -o-transition: all 0.5s cubic-bezier(0.87, -0.41, 0.19, 1.44); -webkit-transition: all 0.5s cubic-bezier(0.87, -0.41, 0.19, 1.44); transition: all 0.5s cubic-bezier(0.87, -0.41, 0.19, 1.44);
}
.ARS:hover { color: #EF836E; -moz-transition: color 0.5s !important; -o-transition: color 0.5s !important; -webkit-transition: color 0.5s !important; transition: color 0.5s !important;
}
.loaded.new-page .ARS { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); -moz-transition-delay: 2.15s; -o-transition-delay: 2.15s; -webkit-transition-delay: 2.15s; transition-delay: 2.15s;
}
@-moz-keyframes ARS { from { -moz-transform: translateY(0); transform: translateY(0); } to { -moz-transform: translateY(10vh); transform: translateY(10vh); }
}
@-webkit-keyframes ARS { from { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(10vh); transform: translateY(10vh); }
}
@keyframes ARS { from { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } to { -moz-transform: translateY(10vh); -ms-transform: translateY(10vh); -webkit-transform: translateY(10vh); transform: translateY(10vh); }
}

Page Transition Loader - Script Codes JS Codes

// imitation of new page loading
window.onload = function() { $body = $('body'), $btn = $('.btn'); loader(10); $btn.on('click', function(){ $body.removeClass().addClass('restart'); loader( getRandomNumber(300, 3000) ); }); function loader(delay) { setTimeout(function(){ $body.addClass('loading'); }, delay); setTimeout(function(){ $body.addClass('loaded'); }, delay + 1700); setTimeout(function(){ $body.removeClass('restart').addClass('new-page'); }, delay + 1950); } function getRandomNumber(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
}

Home Page	Home
Developer	Arsen Zbidniakov
Username	ARS
Uploaded	October 13, 2022
Rating	4.5
Size	7,268 Kb
Views	32,384

Do you need developer help for Page Transition Loader?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Arsen Zbidniakov (ARS) Script Codes

Name	Size
ELEKS Digital Production	9,176 Kb
Apple Devices Mockup	2,484 Kb
Long Shadows for Font Awesome	3,424 Kb
Split Showcase	3,789 Kb
Timer	2,845 Kb
Animated Gradient Ghost Button Concept	3,590 Kb
IPhone lockscreen	3,923 Kb
Shattering Text Animation	5,244 Kb
Pastel Loader	3,365 Kb
GSAP Text Animation	2,777 Kb

Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Caputre Cam with JS	KimmoCommit	2,795 Kb
Playing with transition timing	Mattgrosswork	1,993 Kb
GrcJS	Vino6	2,047 Kb
UI Challenge - Budget Selector	AgentRR007	3,547 Kb
Gradients	Karpovsystems	2,394 Kb
Midterm dry run	Jds317	1,649 Kb
A Pen by Moeid Saleem	Moeidsaleem	1,862 Kb
Importable Clearfix	Corysimmons	1,411 Kb
Pure CSS read more toggle	Idered	2,344 Kb
Sitemap generator for Sharepoint	Gyusza	2,518 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!