Progress Spinner Loader

Written by @phuang 8 October 2022

Add a spinner effect to your site when loading web content, such as loading an app, submitting a form, or saving updates.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. -->
<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progress Spinner Loader</title>

<!-- font awesome library include 4.7 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- css styles -->
<style>

*{
  margin: 0;
  padding: 0;
  font-family: arial, monospace;
}

/* css loader effect */
.loader7-bars-container>*:nth-of-type(5),.loader7-bars-container>*:nth-of-type(4),.loader7-bars-container>*:nth-of-type(3),.loader7-bars-container>*:nth-of-type(2),.loader7-bars-container>*:nth-of-type(1),.loader7-bars-container,.loader6-shape-container>*:nth-of-type(5),.loader6-shape-container>*:nth-of-type(4),.loader6-shape-container>*:nth-of-type(3),.loader6-shape-container>*:nth-of-type(2),.loader6-shape-container>*:nth-of-type(1),.loader6-shape-container,.loader5-spinner-container>*:nth-of-type(1),.loader5-spinner-container,.loader4-spinner-container>*,.loader4-spinner-container,.loader3-spinner-container>*,.loader2-spinner-container>*,.loader2-spinner-container,.loader1-spinner-text,.loader1-spinner-item:after,.loader1-spinner-item:before,.loader1-spinner-item{border-radius:100%;position:absolute;top:50%;left:50%;z-index:2000}.loader-container{position:fixed;width:100%;height:100%;top:0;z-index:1000}.force-gpu{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.loader1-spinner-item{width:150px;height:150px;margin:-80px 0px 0px -80px;border:5px rgb(255, 255, 255) solid;border:5px solid rgba(0,0,0,0);border-top-color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);animation:loader1-spinner-spin 3s linear infinite}.loader1-spinner-item:before{content:"";top:5px;left:5px;right:5px;bottom:5px;border:5px solid rgb(245, 125, 31);border:5px solid rgba(0,0,0,0);border-top-color:rgb(245, 125, 31);border-bottom-color:rgb(245, 125, 31);animation:loader1-spinner-spin 1.5s linear infinite}.loader1-spinner-item:after{content:"";top:15px;left:15px;right:15px;bottom:15px;border:5px solid rgb(64, 94, 127);border:5px solid rgba(0,0,0,0);border-top-color:rgb(64, 94, 127);border-bottom-color:rgb(64, 94, 127);animation:loader1-spinner-spin 0.75s linear infinite}.loader1-spinner-text{color:rgb(255, 255, 255);font-weight:bold;position:fixed;font-size:1em;margin-right:-50%;transform:translate(-50%, -50%);animation:loader1-spinner-fade 2s linear infinite}@-webkit-keyframes loader1-spinner-spin{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes loader1-spinner-spin{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-ms-keyframes loader1-spinner-spin{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes loader1-spinner-spin{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loader1-spinner-spin{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes loader1-spinner-fade{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@-moz-keyframes loader1-spinner-fade{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@-ms-keyframes loader1-spinner-fade{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@-o-keyframes loader1-spinner-fade{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@keyframes loader1-spinner-fade{0%{opacity:0}50%{opacity:1}100%{opacity:0}}.loader2-spinner-container{animation:loader2-spinner-spin 0.5s linear infinite}.loader2-spinner-container>*{width:10px;height:10px;margin:-5px 0px 0px -5px}.loader2-spinner-container>*:nth-of-type(1){width:10px;height:10px;transform:rotate(30deg) translate(50px) rotate(-30deg);background:rgba(20,88,131,.08)}.loader2-spinner-container>*:nth-of-type(2){width:10px;height:10px;transform:rotate(60deg) translate(50px) rotate(-60deg);background:rgba(43,105,143,.17)}.loader2-spinner-container>*:nth-of-type(3){width:10px;height:10px;transform:rotate(90deg) translate(50px) rotate(-90deg);background:rgba(64,119,154,.25)}.loader2-spinner-container>*:nth-of-type(4){width:10px;height:10px;transform:rotate(120deg) translate(50px) rotate(-120deg);background:rgba(84,134,165,.33)}.loader2-spinner-container>*:nth-of-type(5){width:10px;height:10px;transform:rotate(150deg) translate(50px) rotate(-150deg);background:rgba(107,150,177,.42)}.loader2-spinner-container>*:nth-of-type(6){width:10px;height:10px;transform:rotate(180deg) translate(50px) rotate(-180deg);background:rgba(128,165,188,.5)}.loader2-spinner-container>*:nth-of-type(7){width:10px;height:10px;transform:rotate(210deg) translate(50px) rotate(-210deg);background:rgba(148,179,198,.58)}.loader2-spinner-container>*:nth-of-type(8){width:10px;height:10px;transform:rotate(240deg) translate(50px) rotate(-240deg);background:rgba(171,195,210,.67)}.loader2-spinner-container>*:nth-of-type(9){width:10px;height:10px;transform:rotate(270deg) translate(50px) rotate(-270deg);background:rgba(191,210,221,.75)}.loader2-spinner-container>*:nth-of-type(10){width:10px;height:10px;transform:rotate(300deg) translate(50px) rotate(-300deg);background:rgba(212,224,232,.83)}.loader2-spinner-container>*:nth-of-type(11){width:10px;height:10px;transform:rotate(330deg) translate(50px) rotate(-330deg);background:rgba(235,241,244,.92)}.loader2-spinner-container>*:nth-of-type(12){width:10px;height:10px;transform:rotate(360deg) translate(50px) rotate(-360deg);background:#fff}@-webkit-keyframes loader2-spinner-spin{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes loader2-spinner-spin{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-ms-keyframes loader2-spinner-spin{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes loader2-spinner-spin{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loader2-spinner-spin{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}.loader3-spinner-container>*{width:100px;height:100px;margin:-55px 0px 0px -55px;border:5px rgb(255, 255, 120) solid;border:5px solid rgba(0,0,0,0);border-top-color:rgb(255, 255, 120);border-right-color:rgb(255, 255, 120);border-bottom-color:rgb(255, 255, 120);animation:loader3-spinner-spin 0.75s linear infinite}@-webkit-keyframes loader3-spinner-spin{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes loader3-spinner-spin{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-ms-keyframes loader3-spinner-spin{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes loader3-spinner-spin{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loader3-spinner-spin{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}.loader4-spinner-container>*{width:1px;height:1px;margin:-1px 0px 0px -1px}.loader4-spinner-container>*:nth-of-type(1){width:1px;height:1px;transform:rotate(330deg) translate(12px) rotate(90deg) scale(2, 5);background:rgba(54,28,83,.08)}.loader4-spinner-container>*:nth-of-type(2){width:1px;height:1px;transform:rotate(300deg) translate(12px) rotate(90deg) scale(2, 5);background:rgba(74,50,100,.17)}.loader4-spinner-container>*:nth-of-type(3){width:1px;height:1px;transform:rotate(270deg) translate(12px) rotate(90deg) scale(2, 5);background:rgba(92,70,115,.25)}.loader4-spinner-container>*:nth-of-type(4){width:1px;height:1px;transform:rotate(240deg) translate(12px) rotate(90deg) scale(2, 5);background:rgba(109,90,130,.33)}.loader4-spinner-container>*:nth-of-type(5){width:1px;height:1px;transform:rotate(210deg) translate(12px) rotate(90deg) scale(2, 5);background:rgba(129,112,147,.42)}.loader4-spinner-container>*:nth-of-type(6){width:1px;height:1px;transform:rotate(180deg) translate(12px) rotate(90deg) scale(2, 5);background:rgba(146,132,162,.5)}.loader4-spinner-container>*:nth-of-type(7){width:1px;height:1px;transform:rotate(150deg) translate(12px) rotate(90deg) scale(2, 5);background:rgba(163,151,176,.58)}.loader4-spinner-container>*:nth-of-type(8){width:1px;height:1px;transform:rotate(120deg) translate(12px) rotate(90deg) scale(2, 5);background:rgba(183,173,193,.67)}.loader4-spinner-container>*:nth-of-type(9){width:1px;height:1px;transform:rotate(90deg) translate(12px) rotate(90deg) scale(2, 5);background:rgba(201,193,208,.75)}.loader4-spinner-container>*:nth-of-type(10){width:1px;height:1px;transform:rotate(60deg) translate(12px) rotate(90deg) scale(2, 5);background:rgba(218,213,223,.83)}.loader4-spinner-container>*:nth-of-type(11){width:1px;height:1px;transform:rotate(30deg) translate(12px) rotate(90deg) scale(2, 5);background:rgba(238,235,240,.92)}.loader4-spinner-container>*:nth-of-type(12){width:1px;height:1px;transform:rotate(0deg) translate(12px) rotate(90deg) scale(2, 5);background:#fff}.loader4-spinner-container>*:nth-of-type(1){animation:loader4-spinner-fade-1 0.5s steps(1, end) infinite}.loader4-spinner-container>*:nth-of-type(2){animation:loader4-spinner-fade-2 0.5s steps(1, end) infinite}.loader4-spinner-container>*:nth-of-type(3){animation:loader4-spinner-fade-3 0.5s steps(1, end) infinite}.loader4-spinner-container>*:nth-of-type(4){animation:loader4-spinner-fade-4 0.5s steps(1, end) infinite}.loader4-spinner-container>*:nth-of-type(5){animation:loader4-spinner-fade-5 0.5s steps(1, end) infinite}.loader4-spinner-container>*:nth-of-type(6){animation:loader4-spinner-fade-6 0.5s steps(1, end) infinite}.loader4-spinner-container>*:nth-of-type(7){animation:loader4-spinner-fade-7 0.5s steps(1, end) infinite}.loader4-spinner-container>*:nth-of-type(8){animation:loader4-spinner-fade-8 0.5s steps(1, end) infinite}.loader4-spinner-container>*:nth-of-type(9){animation:loader4-spinner-fade-9 0.5s steps(1, end) infinite}.loader4-spinner-container>*:nth-of-type(10){animation:loader4-spinner-fade-10 0.5s steps(1, end) infinite}.loader4-spinner-container>*:nth-of-type(11){animation:loader4-spinner-fade-11 0.5s steps(1, end) infinite}.loader4-spinner-container>*:nth-of-type(12){animation:loader4-spinner-fade-12 0.5s steps(1, end) infinite}@-webkit-keyframes loader4-spinner-fade-1{0%{background:rgba(54,28,83,.08)}8%{background:rgba(74,50,100,.17)}17%{background:rgba(92,70,115,.25)}25%{background:rgba(109,90,130,.33)}33%{background:rgba(129,112,147,.42)}42%{background:rgba(146,132,162,.5)}50%{background:rgba(163,151,176,.58)}58%{background:rgba(183,173,193,.67)}67%{background:rgba(201,193,208,.75)}75%{background:rgba(218,213,223,.83)}83%{background:rgba(238,235,240,.92)}92%{background:#fff}100%{background:rgba(54,28,83,.08)}}@-moz-keyframes loader4-spinner-fade-1{0%{background:rgba(54,28,83,.08)}8%{background:rgba(74,50,100,.17)}17%{background:rgba(92,70,115,.25)}25%{background:rgba(109,90,130,.33)}33%{background:rgba(129,112,147,.42)}42%{background:rgba(146,132,162,.5)}50%{background:rgba(163,151,176,.58)}58%{background:rgba(183,173,193,.67)}67%{background:rgba(201,193,208,.75)}75%{background:rgba(218,213,223,.83)}83%{background:rgba(238,235,240,.92)}92%{background:#fff}100%{background:rgba(54,28,83,.08)}}@-ms-keyframes loader4-spinner-fade-1{0%{background:rgba(54,28,83,.08)}8%{background:rgba(74,50,100,.17)}17%{background:rgba(92,70,115,.25)}25%{background:rgba(109,90,130,.33)}33%{background:rgba(129,112,147,.42)}42%{background:rgba(146,132,162,.5)}50%{background:rgba(163,151,176,.58)}58%{background:rgba(183,173,193,.67)}67%{background:rgba(201,193,208,.75)}75%{background:rgba(218,213,223,.83)}83%{background:rgba(238,235,240,.92)}92%{background:#fff}100%{background:rgba(54,28,83,.08)}}@-o-keyframes loader4-spinner-fade-1{0%{background:rgba(54,28,83,.08)}8%{background:rgba(74,50,100,.17)}17%{background:rgba(92,70,115,.25)}25%{background:rgba(109,90,130,.33)}33%{background:rgba(129,112,147,.42)}42%{background:rgba(146,132,162,.5)}50%{background:rgba(163,151,176,.58)}58%{background:rgba(183,173,193,.67)}67%{background:rgba(201,193,208,.75)}75%{background:rgba(218,213,223,.83)}83%{background:rgba(238,235,240,.92)}92%{background:#fff}100%{background:rgba(54,28,83,.08)}}@keyframes loader4-spinner-fade-1{0%{background:rgba(54,28,83,.08)}8%{background:rgba(74,50,100,.17)}17%{background:rgba(92,70,115,.25)}25%{background:rgba(109,90,130,.33)}33%{background:rgba(129,112,147,.42)}42%{background:rgba(146,132,162,.5)}50%{background:rgba(163,151,176,.58)}58%{background:rgba(183,173,193,.67)}67%{background:rgba(201,193,208,.75)}75%{background:rgba(218,213,223,.83)}83%{background:rgba(238,235,240,.92)}92%{background:#fff}100%{background:rgba(54,28,83,.08)}}@-webkit-keyframes loader4-spinner-fade-2{0%{background:rgba(74,50,100,.17)}8%{background:rgba(92,70,115,.25)}17%{background:rgba(109,90,130,.33)}25%{background:rgba(129,112,147,.42)}33%{background:rgba(146,132,162,.5)}42%{background:rgba(163,151,176,.58)}50%{background:rgba(183,173,193,.67)}58%{background:rgba(201,193,208,.75)}67%{background:rgba(218,213,223,.83)}75%{background:rgba(238,235,240,.92)}83%{background:#fff}92%{background:rgba(54,28,83,.08)}100%{background:rgba(74,50,100,.17)}}@-moz-keyframes loader4-spinner-fade-2{0%{background:rgba(74,50,100,.17)}8%{background:rgba(92,70,115,.25)}17%{background:rgba(109,90,130,.33)}25%{background:rgba(129,112,147,.42)}33%{background:rgba(146,132,162,.5)}42%{background:rgba(163,151,176,.58)}50%{background:rgba(183,173,193,.67)}58%{background:rgba(201,193,208,.75)}67%{background:rgba(218,213,223,.83)}75%{background:rgba(238,235,240,.92)}83%{background:#fff}92%{background:rgba(54,28,83,.08)}100%{background:rgba(74,50,100,.17)}}@-ms-keyframes loader4-spinner-fade-2{0%{background:rgba(74,50,100,.17)}8%{background:rgba(92,70,115,.25)}17%{background:rgba(109,90,130,.33)}25%{background:rgba(129,112,147,.42)}33%{background:rgba(146,132,162,.5)}42%{background:rgba(163,151,176,.58)}50%{background:rgba(183,173,193,.67)}58%{background:rgba(201,193,208,.75)}67%{background:rgba(218,213,223,.83)}75%{background:rgba(238,235,240,.92)}83%{background:#fff}92%{background:rgba(54,28,83,.08)}100%{background:rgba(74,50,100,.17)}}@-o-keyframes loader4-spinner-fade-2{0%{background:rgba(74,50,100,.17)}8%{background:rgba(92,70,115,.25)}17%{background:rgba(109,90,130,.33)}25%{background:rgba(129,112,147,.42)}33%{background:rgba(146,132,162,.5)}42%{background:rgba(163,151,176,.58)}50%{background:rgba(183,173,193,.67)}58%{background:rgba(201,193,208,.75)}67%{background:rgba(218,213,223,.83)}75%{background:rgba(238,235,240,.92)}83%{background:#fff}92%{background:rgba(54,28,83,.08)}100%{background:rgba(74,50,100,.17)}}@keyframes loader4-spinner-fade-2{0%{background:rgba(74,50,100,.17)}8%{background:rgba(92,70,115,.25)}17%{background:rgba(109,90,130,.33)}25%{background:rgba(129,112,147,.42)}33%{background:rgba(146,132,162,.5)}42%{background:rgba(163,151,176,.58)}50%{background:rgba(183,173,193,.67)}58%{background:rgba(201,193,208,.75)}67%{background:rgba(218,213,223,.83)}75%{background:rgba(238,235,240,.92)}83%{background:#fff}92%{background:rgba(54,28,83,.08)}100%{background:rgba(74,50,100,.17)}}@-webkit-keyframes loader4-spinner-fade-3{0%{background:rgba(92,70,115,.25)}8%{background:rgba(109,90,130,.33)}17%{background:rgba(129,112,147,.42)}25%{background:rgba(146,132,162,.5)}33%{background:rgba(163,151,176,.58)}42%{background:rgba(183,173,193,.67)}50%{background:rgba(201,193,208,.75)}58%{background:rgba(218,213,223,.83)}67%{background:rgba(238,235,240,.92)}75%{background:#fff}83%{background:rgba(54,28,83,.08)}92%{background:rgba(74,50,100,.17)}100%{background:rgba(92,70,115,.25)}}@-moz-keyframes loader4-spinner-fade-3{0%{background:rgba(92,70,115,.25)}8%{background:rgba(109,90,130,.33)}17%{background:rgba(129,112,147,.42)}25%{background:rgba(146,132,162,.5)}33%{background:rgba(163,151,176,.58)}42%{background:rgba(183,173,193,.67)}50%{background:rgba(201,193,208,.75)}58%{background:rgba(218,213,223,.83)}67%{background:rgba(238,235,240,.92)}75%{background:#fff}83%{background:rgba(54,28,83,.08)}92%{background:rgba(74,50,100,.17)}100%{background:rgba(92,70,115,.25)}}@-ms-keyframes loader4-spinner-fade-3{0%{background:rgba(92,70,115,.25)}8%{background:rgba(109,90,130,.33)}17%{background:rgba(129,112,147,.42)}25%{background:rgba(146,132,162,.5)}33%{background:rgba(163,151,176,.58)}42%{background:rgba(183,173,193,.67)}50%{background:rgba(201,193,208,.75)}58%{background:rgba(218,213,223,.83)}67%{background:rgba(238,235,240,.92)}75%{background:#fff}83%{background:rgba(54,28,83,.08)}92%{background:rgba(74,50,100,.17)}100%{background:rgba(92,70,115,.25)}}@-o-keyframes loader4-spinner-fade-3{0%{background:rgba(92,70,115,.25)}8%{background:rgba(109,90,130,.33)}17%{background:rgba(129,112,147,.42)}25%{background:rgba(146,132,162,.5)}33%{background:rgba(163,151,176,.58)}42%{background:rgba(183,173,193,.67)}50%{background:rgba(201,193,208,.75)}58%{background:rgba(218,213,223,.83)}67%{background:rgba(238,235,240,.92)}75%{background:#fff}83%{background:rgba(54,28,83,.08)}92%{background:rgba(74,50,100,.17)}100%{background:rgba(92,70,115,.25)}}@keyframes loader4-spinner-fade-3{0%{background:rgba(92,70,115,.25)}8%{background:rgba(109,90,130,.33)}17%{background:rgba(129,112,147,.42)}25%{background:rgba(146,132,162,.5)}33%{background:rgba(163,151,176,.58)}42%{background:rgba(183,173,193,.67)}50%{background:rgba(201,193,208,.75)}58%{background:rgba(218,213,223,.83)}67%{background:rgba(238,235,240,.92)}75%{background:#fff}83%{background:rgba(54,28,83,.08)}92%{background:rgba(74,50,100,.17)}100%{background:rgba(92,70,115,.25)}}@-webkit-keyframes loader4-spinner-fade-4{0%{background:rgba(109,90,130,.33)}8%{background:rgba(129,112,147,.42)}17%{background:rgba(146,132,162,.5)}25%{background:rgba(163,151,176,.58)}33%{background:rgba(183,173,193,.67)}42%{background:rgba(201,193,208,.75)}50%{background:rgba(218,213,223,.83)}58%{background:rgba(238,235,240,.92)}67%{background:#fff}75%{background:rgba(54,28,83,.08)}83%{background:rgba(74,50,100,.17)}92%{background:rgba(92,70,115,.25)}100%{background:rgba(109,90,130,.33)}}@-moz-keyframes loader4-spinner-fade-4{0%{background:rgba(109,90,130,.33)}8%{background:rgba(129,112,147,.42)}17%{background:rgba(146,132,162,.5)}25%{background:rgba(163,151,176,.58)}33%{background:rgba(183,173,193,.67)}42%{background:rgba(201,193,208,.75)}50%{background:rgba(218,213,223,.83)}58%{background:rgba(238,235,240,.92)}67%{background:#fff}75%{background:rgba(54,28,83,.08)}83%{background:rgba(74,50,100,.17)}92%{background:rgba(92,70,115,.25)}100%{background:rgba(109,90,130,.33)}}@-ms-keyframes loader4-spinner-fade-4{0%{background:rgba(109,90,130,.33)}8%{background:rgba(129,112,147,.42)}17%{background:rgba(146,132,162,.5)}25%{background:rgba(163,151,176,.58)}33%{background:rgba(183,173,193,.67)}42%{background:rgba(201,193,208,.75)}50%{background:rgba(218,213,223,.83)}58%{background:rgba(238,235,240,.92)}67%{background:#fff}75%{background:rgba(54,28,83,.08)}83%{background:rgba(74,50,100,.17)}92%{background:rgba(92,70,115,.25)}100%{background:rgba(109,90,130,.33)}}@-o-keyframes loader4-spinner-fade-4{0%{background:rgba(109,90,130,.33)}8%{background:rgba(129,112,147,.42)}17%{background:rgba(146,132,162,.5)}25%{background:rgba(163,151,176,.58)}33%{background:rgba(183,173,193,.67)}42%{background:rgba(201,193,208,.75)}50%{background:rgba(218,213,223,.83)}58%{background:rgba(238,235,240,.92)}67%{background:#fff}75%{background:rgba(54,28,83,.08)}83%{background:rgba(74,50,100,.17)}92%{background:rgba(92,70,115,.25)}100%{background:rgba(109,90,130,.33)}}@keyframes loader4-spinner-fade-4{0%{background:rgba(109,90,130,.33)}8%{background:rgba(129,112,147,.42)}17%{background:rgba(146,132,162,.5)}25%{background:rgba(163,151,176,.58)}33%{background:rgba(183,173,193,.67)}42%{background:rgba(201,193,208,.75)}50%{background:rgba(218,213,223,.83)}58%{background:rgba(238,235,240,.92)}67%{background:#fff}75%{background:rgba(54,28,83,.08)}83%{background:rgba(74,50,100,.17)}92%{background:rgba(92,70,115,.25)}100%{background:rgba(109,90,130,.33)}}@-webkit-keyframes loader4-spinner-fade-5{0%{background:rgba(129,112,147,.42)}8%{background:rgba(146,132,162,.5)}17%{background:rgba(163,151,176,.58)}25%{background:rgba(183,173,193,.67)}33%{background:rgba(201,193,208,.75)}42%{background:rgba(218,213,223,.83)}50%{background:rgba(238,235,240,.92)}58%{background:#fff}67%{background:rgba(54,28,83,.08)}75%{background:rgba(74,50,100,.17)}83%{background:rgba(92,70,115,.25)}92%{background:rgba(109,90,130,.33)}100%{background:rgba(129,112,147,.42)}}@-moz-keyframes loader4-spinner-fade-5{0%{background:rgba(129,112,147,.42)}8%{background:rgba(146,132,162,.5)}17%{background:rgba(163,151,176,.58)}25%{background:rgba(183,173,193,.67)}33%{background:rgba(201,193,208,.75)}42%{background:rgba(218,213,223,.83)}50%{background:rgba(238,235,240,.92)}58%{background:#fff}67%{background:rgba(54,28,83,.08)}75%{background:rgba(74,50,100,.17)}83%{background:rgba(92,70,115,.25)}92%{background:rgba(109,90,130,.33)}100%{background:rgba(129,112,147,.42)}}@-ms-keyframes loader4-spinner-fade-5{0%{background:rgba(129,112,147,.42)}8%{background:rgba(146,132,162,.5)}17%{background:rgba(163,151,176,.58)}25%{background:rgba(183,173,193,.67)}33%{background:rgba(201,193,208,.75)}42%{background:rgba(218,213,223,.83)}50%{background:rgba(238,235,240,.92)}58%{background:#fff}67%{background:rgba(54,28,83,.08)}75%{background:rgba(74,50,100,.17)}83%{background:rgba(92,70,115,.25)}92%{background:rgba(109,90,130,.33)}100%{background:rgba(129,112,147,.42)}}@-o-keyframes loader4-spinner-fade-5{0%{background:rgba(129,112,147,.42)}8%{background:rgba(146,132,162,.5)}17%{background:rgba(163,151,176,.58)}25%{background:rgba(183,173,193,.67)}33%{background:rgba(201,193,208,.75)}42%{background:rgba(218,213,223,.83)}50%{background:rgba(238,235,240,.92)}58%{background:#fff}67%{background:rgba(54,28,83,.08)}75%{background:rgba(74,50,100,.17)}83%{background:rgba(92,70,115,.25)}92%{background:rgba(109,90,130,.33)}100%{background:rgba(129,112,147,.42)}}@keyframes loader4-spinner-fade-5{0%{background:rgba(129,112,147,.42)}8%{background:rgba(146,132,162,.5)}17%{background:rgba(163,151,176,.58)}25%{background:rgba(183,173,193,.67)}33%{background:rgba(201,193,208,.75)}42%{background:rgba(218,213,223,.83)}50%{background:rgba(238,235,240,.92)}58%{background:#fff}67%{background:rgba(54,28,83,.08)}75%{background:rgba(74,50,100,.17)}83%{background:rgba(92,70,115,.25)}92%{background:rgba(109,90,130,.33)}100%{background:rgba(129,112,147,.42)}}@-webkit-keyframes loader4-spinner-fade-6{0%{background:rgba(146,132,162,.5)}8%{background:rgba(163,151,176,.58)}17%{background:rgba(183,173,193,.67)}25%{background:rgba(201,193,208,.75)}33%{background:rgba(218,213,223,.83)}42%{background:rgba(238,235,240,.92)}50%{background:#fff}58%{background:rgba(54,28,83,.08)}67%{background:rgba(74,50,100,.17)}75%{background:rgba(92,70,115,.25)}83%{background:rgba(109,90,130,.33)}92%{background:rgba(129,112,147,.42)}100%{background:rgba(146,132,162,.5)}}@-moz-keyframes loader4-spinner-fade-6{0%{background:rgba(146,132,162,.5)}8%{background:rgba(163,151,176,.58)}17%{background:rgba(183,173,193,.67)}25%{background:rgba(201,193,208,.75)}33%{background:rgba(218,213,223,.83)}42%{background:rgba(238,235,240,.92)}50%{background:#fff}58%{background:rgba(54,28,83,.08)}67%{background:rgba(74,50,100,.17)}75%{background:rgba(92,70,115,.25)}83%{background:rgba(109,90,130,.33)}92%{background:rgba(129,112,147,.42)}100%{background:rgba(146,132,162,.5)}}@-ms-keyframes loader4-spinner-fade-6{0%{background:rgba(146,132,162,.5)}8%{background:rgba(163,151,176,.58)}17%{background:rgba(183,173,193,.67)}25%{background:rgba(201,193,208,.75)}33%{background:rgba(218,213,223,.83)}42%{background:rgba(238,235,240,.92)}50%{background:#fff}58%{background:rgba(54,28,83,.08)}67%{background:rgba(74,50,100,.17)}75%{background:rgba(92,70,115,.25)}83%{background:rgba(109,90,130,.33)}92%{background:rgba(129,112,147,.42)}100%{background:rgba(146,132,162,.5)}}@-o-keyframes loader4-spinner-fade-6{0%{background:rgba(146,132,162,.5)}8%{background:rgba(163,151,176,.58)}17%{background:rgba(183,173,193,.67)}25%{background:rgba(201,193,208,.75)}33%{background:rgba(218,213,223,.83)}42%{background:rgba(238,235,240,.92)}50%{background:#fff}58%{background:rgba(54,28,83,.08)}67%{background:rgba(74,50,100,.17)}75%{background:rgba(92,70,115,.25)}83%{background:rgba(109,90,130,.33)}92%{background:rgba(129,112,147,.42)}100%{background:rgba(146,132,162,.5)}}@keyframes loader4-spinner-fade-6{0%{background:rgba(146,132,162,.5)}8%{background:rgba(163,151,176,.58)}17%{background:rgba(183,173,193,.67)}25%{background:rgba(201,193,208,.75)}33%{background:rgba(218,213,223,.83)}42%{background:rgba(238,235,240,.92)}50%{background:#fff}58%{background:rgba(54,28,83,.08)}67%{background:rgba(74,50,100,.17)}75%{background:rgba(92,70,115,.25)}83%{background:rgba(109,90,130,.33)}92%{background:rgba(129,112,147,.42)}100%{background:rgba(146,132,162,.5)}}@-webkit-keyframes loader4-spinner-fade-7{0%{background:rgba(163,151,176,.58)}8%{background:rgba(183,173,193,.67)}17%{background:rgba(201,193,208,.75)}25%{background:rgba(218,213,223,.83)}33%{background:rgba(238,235,240,.92)}42%{background:#fff}50%{background:rgba(54,28,83,.08)}58%{background:rgba(74,50,100,.17)}67%{background:rgba(92,70,115,.25)}75%{background:rgba(109,90,130,.33)}83%{background:rgba(129,112,147,.42)}92%{background:rgba(146,132,162,.5)}100%{background:rgba(163,151,176,.58)}}@-moz-keyframes loader4-spinner-fade-7{0%{background:rgba(163,151,176,.58)}8%{background:rgba(183,173,193,.67)}17%{background:rgba(201,193,208,.75)}25%{background:rgba(218,213,223,.83)}33%{background:rgba(238,235,240,.92)}42%{background:#fff}50%{background:rgba(54,28,83,.08)}58%{background:rgba(74,50,100,.17)}67%{background:rgba(92,70,115,.25)}75%{background:rgba(109,90,130,.33)}83%{background:rgba(129,112,147,.42)}92%{background:rgba(146,132,162,.5)}100%{background:rgba(163,151,176,.58)}}@-ms-keyframes loader4-spinner-fade-7{0%{background:rgba(163,151,176,.58)}8%{background:rgba(183,173,193,.67)}17%{background:rgba(201,193,208,.75)}25%{background:rgba(218,213,223,.83)}33%{background:rgba(238,235,240,.92)}42%{background:#fff}50%{background:rgba(54,28,83,.08)}58%{background:rgba(74,50,100,.17)}67%{background:rgba(92,70,115,.25)}75%{background:rgba(109,90,130,.33)}83%{background:rgba(129,112,147,.42)}92%{background:rgba(146,132,162,.5)}100%{background:rgba(163,151,176,.58)}}@-o-keyframes loader4-spinner-fade-7{0%{background:rgba(163,151,176,.58)}8%{background:rgba(183,173,193,.67)}17%{background:rgba(201,193,208,.75)}25%{background:rgba(218,213,223,.83)}33%{background:rgba(238,235,240,.92)}42%{background:#fff}50%{background:rgba(54,28,83,.08)}58%{background:rgba(74,50,100,.17)}67%{background:rgba(92,70,115,.25)}75%{background:rgba(109,90,130,.33)}83%{background:rgba(129,112,147,.42)}92%{background:rgba(146,132,162,.5)}100%{background:rgba(163,151,176,.58)}}@keyframes loader4-spinner-fade-7{0%{background:rgba(163,151,176,.58)}8%{background:rgba(183,173,193,.67)}17%{background:rgba(201,193,208,.75)}25%{background:rgba(218,213,223,.83)}33%{background:rgba(238,235,240,.92)}42%{background:#fff}50%{background:rgba(54,28,83,.08)}58%{background:rgba(74,50,100,.17)}67%{background:rgba(92,70,115,.25)}75%{background:rgba(109,90,130,.33)}83%{background:rgba(129,112,147,.42)}92%{background:rgba(146,132,162,.5)}100%{background:rgba(163,151,176,.58)}}@-webkit-keyframes loader4-spinner-fade-8{0%{background:rgba(183,173,193,.67)}8%{background:rgba(201,193,208,.75)}17%{background:rgba(218,213,223,.83)}25%{background:rgba(238,235,240,.92)}33%{background:#fff}42%{background:rgba(54,28,83,.08)}50%{background:rgba(74,50,100,.17)}58%{background:rgba(92,70,115,.25)}67%{background:rgba(109,90,130,.33)}75%{background:rgba(129,112,147,.42)}83%{background:rgba(146,132,162,.5)}92%{background:rgba(163,151,176,.58)}100%{background:rgba(183,173,193,.67)}}@-moz-keyframes loader4-spinner-fade-8{0%{background:rgba(183,173,193,.67)}8%{background:rgba(201,193,208,.75)}17%{background:rgba(218,213,223,.83)}25%{background:rgba(238,235,240,.92)}33%{background:#fff}42%{background:rgba(54,28,83,.08)}50%{background:rgba(74,50,100,.17)}58%{background:rgba(92,70,115,.25)}67%{background:rgba(109,90,130,.33)}75%{background:rgba(129,112,147,.42)}83%{background:rgba(146,132,162,.5)}92%{background:rgba(163,151,176,.58)}100%{background:rgba(183,173,193,.67)}}@-ms-keyframes loader4-spinner-fade-8{0%{background:rgba(183,173,193,.67)}8%{background:rgba(201,193,208,.75)}17%{background:rgba(218,213,223,.83)}25%{background:rgba(238,235,240,.92)}33%{background:#fff}42%{background:rgba(54,28,83,.08)}50%{background:rgba(74,50,100,.17)}58%{background:rgba(92,70,115,.25)}67%{background:rgba(109,90,130,.33)}75%{background:rgba(129,112,147,.42)}83%{background:rgba(146,132,162,.5)}92%{background:rgba(163,151,176,.58)}100%{background:rgba(183,173,193,.67)}}@-o-keyframes loader4-spinner-fade-8{0%{background:rgba(183,173,193,.67)}8%{background:rgba(201,193,208,.75)}17%{background:rgba(218,213,223,.83)}25%{background:rgba(238,235,240,.92)}33%{background:#fff}42%{background:rgba(54,28,83,.08)}50%{background:rgba(74,50,100,.17)}58%{background:rgba(92,70,115,.25)}67%{background:rgba(109,90,130,.33)}75%{background:rgba(129,112,147,.42)}83%{background:rgba(146,132,162,.5)}92%{background:rgba(163,151,176,.58)}100%{background:rgba(183,173,193,.67)}}@keyframes loader4-spinner-fade-8{0%{background:rgba(183,173,193,.67)}8%{background:rgba(201,193,208,.75)}17%{background:rgba(218,213,223,.83)}25%{background:rgba(238,235,240,.92)}33%{background:#fff}42%{background:rgba(54,28,83,.08)}50%{background:rgba(74,50,100,.17)}58%{background:rgba(92,70,115,.25)}67%{background:rgba(109,90,130,.33)}75%{background:rgba(129,112,147,.42)}83%{background:rgba(146,132,162,.5)}92%{background:rgba(163,151,176,.58)}100%{background:rgba(183,173,193,.67)}}@-webkit-keyframes loader4-spinner-fade-9{0%{background:rgba(201,193,208,.75)}8%{background:rgba(218,213,223,.83)}17%{background:rgba(238,235,240,.92)}25%{background:#fff}33%{background:rgba(54,28,83,.08)}42%{background:rgba(74,50,100,.17)}50%{background:rgba(92,70,115,.25)}58%{background:rgba(109,90,130,.33)}67%{background:rgba(129,112,147,.42)}75%{background:rgba(146,132,162,.5)}83%{background:rgba(163,151,176,.58)}92%{background:rgba(183,173,193,.67)}100%{background:rgba(201,193,208,.75)}}@-moz-keyframes loader4-spinner-fade-9{0%{background:rgba(201,193,208,.75)}8%{background:rgba(218,213,223,.83)}17%{background:rgba(238,235,240,.92)}25%{background:#fff}33%{background:rgba(54,28,83,.08)}42%{background:rgba(74,50,100,.17)}50%{background:rgba(92,70,115,.25)}58%{background:rgba(109,90,130,.33)}67%{background:rgba(129,112,147,.42)}75%{background:rgba(146,132,162,.5)}83%{background:rgba(163,151,176,.58)}92%{background:rgba(183,173,193,.67)}100%{background:rgba(201,193,208,.75)}}@-ms-keyframes loader4-spinner-fade-9{0%{background:rgba(201,193,208,.75)}8%{background:rgba(218,213,223,.83)}17%{background:rgba(238,235,240,.92)}25%{background:#fff}33%{background:rgba(54,28,83,.08)}42%{background:rgba(74,50,100,.17)}50%{background:rgba(92,70,115,.25)}58%{background:rgba(109,90,130,.33)}67%{background:rgba(129,112,147,.42)}75%{background:rgba(146,132,162,.5)}83%{background:rgba(163,151,176,.58)}92%{background:rgba(183,173,193,.67)}100%{background:rgba(201,193,208,.75)}}@-o-keyframes loader4-spinner-fade-9{0%{background:rgba(201,193,208,.75)}8%{background:rgba(218,213,223,.83)}17%{background:rgba(238,235,240,.92)}25%{background:#fff}33%{background:rgba(54,28,83,.08)}42%{background:rgba(74,50,100,.17)}50%{background:rgba(92,70,115,.25)}58%{background:rgba(109,90,130,.33)}67%{background:rgba(129,112,147,.42)}75%{background:rgba(146,132,162,.5)}83%{background:rgba(163,151,176,.58)}92%{background:rgba(183,173,193,.67)}100%{background:rgba(201,193,208,.75)}}@keyframes loader4-spinner-fade-9{0%{background:rgba(201,193,208,.75)}8%{background:rgba(218,213,223,.83)}17%{background:rgba(238,235,240,.92)}25%{background:#fff}33%{background:rgba(54,28,83,.08)}42%{background:rgba(74,50,100,.17)}50%{background:rgba(92,70,115,.25)}58%{background:rgba(109,90,130,.33)}67%{background:rgba(129,112,147,.42)}75%{background:rgba(146,132,162,.5)}83%{background:rgba(163,151,176,.58)}92%{background:rgba(183,173,193,.67)}100%{background:rgba(201,193,208,.75)}}@-webkit-keyframes loader4-spinner-fade-10{0%{background:rgba(218,213,223,.83)}8%{background:rgba(238,235,240,.92)}17%{background:#fff}25%{background:rgba(54,28,83,.08)}33%{background:rgba(74,50,100,.17)}42%{background:rgba(92,70,115,.25)}50%{background:rgba(109,90,130,.33)}58%{background:rgba(129,112,147,.42)}67%{background:rgba(146,132,162,.5)}75%{background:rgba(163,151,176,.58)}83%{background:rgba(183,173,193,.67)}92%{background:rgba(201,193,208,.75)}100%{background:rgba(218,213,223,.83)}}@-moz-keyframes loader4-spinner-fade-10{0%{background:rgba(218,213,223,.83)}8%{background:rgba(238,235,240,.92)}17%{background:#fff}25%{background:rgba(54,28,83,.08)}33%{background:rgba(74,50,100,.17)}42%{background:rgba(92,70,115,.25)}50%{background:rgba(109,90,130,.33)}58%{background:rgba(129,112,147,.42)}67%{background:rgba(146,132,162,.5)}75%{background:rgba(163,151,176,.58)}83%{background:rgba(183,173,193,.67)}92%{background:rgba(201,193,208,.75)}100%{background:rgba(218,213,223,.83)}}@-ms-keyframes loader4-spinner-fade-10{0%{background:rgba(218,213,223,.83)}8%{background:rgba(238,235,240,.92)}17%{background:#fff}25%{background:rgba(54,28,83,.08)}33%{background:rgba(74,50,100,.17)}42%{background:rgba(92,70,115,.25)}50%{background:rgba(109,90,130,.33)}58%{background:rgba(129,112,147,.42)}67%{background:rgba(146,132,162,.5)}75%{background:rgba(163,151,176,.58)}83%{background:rgba(183,173,193,.67)}92%{background:rgba(201,193,208,.75)}100%{background:rgba(218,213,223,.83)}}@-o-keyframes loader4-spinner-fade-10{0%{background:rgba(218,213,223,.83)}8%{background:rgba(238,235,240,.92)}17%{background:#fff}25%{background:rgba(54,28,83,.08)}33%{background:rgba(74,50,100,.17)}42%{background:rgba(92,70,115,.25)}50%{background:rgba(109,90,130,.33)}58%{background:rgba(129,112,147,.42)}67%{background:rgba(146,132,162,.5)}75%{background:rgba(163,151,176,.58)}83%{background:rgba(183,173,193,.67)}92%{background:rgba(201,193,208,.75)}100%{background:rgba(218,213,223,.83)}}@keyframes loader4-spinner-fade-10{0%{background:rgba(218,213,223,.83)}8%{background:rgba(238,235,240,.92)}17%{background:#fff}25%{background:rgba(54,28,83,.08)}33%{background:rgba(74,50,100,.17)}42%{background:rgba(92,70,115,.25)}50%{background:rgba(109,90,130,.33)}58%{background:rgba(129,112,147,.42)}67%{background:rgba(146,132,162,.5)}75%{background:rgba(163,151,176,.58)}83%{background:rgba(183,173,193,.67)}92%{background:rgba(201,193,208,.75)}100%{background:rgba(218,213,223,.83)}}@-webkit-keyframes loader4-spinner-fade-11{0%{background:rgba(238,235,240,.92)}8%{background:#fff}17%{background:rgba(54,28,83,.08)}25%{background:rgba(74,50,100,.17)}33%{background:rgba(92,70,115,.25)}42%{background:rgba(109,90,130,.33)}50%{background:rgba(129,112,147,.42)}58%{background:rgba(146,132,162,.5)}67%{background:rgba(163,151,176,.58)}75%{background:rgba(183,173,193,.67)}83%{background:rgba(201,193,208,.75)}92%{background:rgba(218,213,223,.83)}100%{background:rgba(238,235,240,.92)}}@-moz-keyframes loader4-spinner-fade-11{0%{background:rgba(238,235,240,.92)}8%{background:#fff}17%{background:rgba(54,28,83,.08)}25%{background:rgba(74,50,100,.17)}33%{background:rgba(92,70,115,.25)}42%{background:rgba(109,90,130,.33)}50%{background:rgba(129,112,147,.42)}58%{background:rgba(146,132,162,.5)}67%{background:rgba(163,151,176,.58)}75%{background:rgba(183,173,193,.67)}83%{background:rgba(201,193,208,.75)}92%{background:rgba(218,213,223,.83)}100%{background:rgba(238,235,240,.92)}}@-ms-keyframes loader4-spinner-fade-11{0%{background:rgba(238,235,240,.92)}8%{background:#fff}17%{background:rgba(54,28,83,.08)}25%{background:rgba(74,50,100,.17)}33%{background:rgba(92,70,115,.25)}42%{background:rgba(109,90,130,.33)}50%{background:rgba(129,112,147,.42)}58%{background:rgba(146,132,162,.5)}67%{background:rgba(163,151,176,.58)}75%{background:rgba(183,173,193,.67)}83%{background:rgba(201,193,208,.75)}92%{background:rgba(218,213,223,.83)}100%{background:rgba(238,235,240,.92)}}@-o-keyframes loader4-spinner-fade-11{0%{background:rgba(238,235,240,.92)}8%{background:#fff}17%{background:rgba(54,28,83,.08)}25%{background:rgba(74,50,100,.17)}33%{background:rgba(92,70,115,.25)}42%{background:rgba(109,90,130,.33)}50%{background:rgba(129,112,147,.42)}58%{background:rgba(146,132,162,.5)}67%{background:rgba(163,151,176,.58)}75%{background:rgba(183,173,193,.67)}83%{background:rgba(201,193,208,.75)}92%{background:rgba(218,213,223,.83)}100%{background:rgba(238,235,240,.92)}}@keyframes loader4-spinner-fade-11{0%{background:rgba(238,235,240,.92)}8%{background:#fff}17%{background:rgba(54,28,83,.08)}25%{background:rgba(74,50,100,.17)}33%{background:rgba(92,70,115,.25)}42%{background:rgba(109,90,130,.33)}50%{background:rgba(129,112,147,.42)}58%{background:rgba(146,132,162,.5)}67%{background:rgba(163,151,176,.58)}75%{background:rgba(183,173,193,.67)}83%{background:rgba(201,193,208,.75)}92%{background:rgba(218,213,223,.83)}100%{background:rgba(238,235,240,.92)}}@-webkit-keyframes loader4-spinner-fade-12{0%{background:#fff}8%{background:rgba(54,28,83,.08)}17%{background:rgba(74,50,100,.17)}25%{background:rgba(92,70,115,.25)}33%{background:rgba(109,90,130,.33)}42%{background:rgba(129,112,147,.42)}50%{background:rgba(146,132,162,.5)}58%{background:rgba(163,151,176,.58)}67%{background:rgba(183,173,193,.67)}75%{background:rgba(201,193,208,.75)}83%{background:rgba(218,213,223,.83)}92%{background:rgba(238,235,240,.92)}100%{background:#fff}}@-moz-keyframes loader4-spinner-fade-12{0%{background:#fff}8%{background:rgba(54,28,83,.08)}17%{background:rgba(74,50,100,.17)}25%{background:rgba(92,70,115,.25)}33%{background:rgba(109,90,130,.33)}42%{background:rgba(129,112,147,.42)}50%{background:rgba(146,132,162,.5)}58%{background:rgba(163,151,176,.58)}67%{background:rgba(183,173,193,.67)}75%{background:rgba(201,193,208,.75)}83%{background:rgba(218,213,223,.83)}92%{background:rgba(238,235,240,.92)}100%{background:#fff}}@-ms-keyframes loader4-spinner-fade-12{0%{background:#fff}8%{background:rgba(54,28,83,.08)}17%{background:rgba(74,50,100,.17)}25%{background:rgba(92,70,115,.25)}33%{background:rgba(109,90,130,.33)}42%{background:rgba(129,112,147,.42)}50%{background:rgba(146,132,162,.5)}58%{background:rgba(163,151,176,.58)}67%{background:rgba(183,173,193,.67)}75%{background:rgba(201,193,208,.75)}83%{background:rgba(218,213,223,.83)}92%{background:rgba(238,235,240,.92)}100%{background:#fff}}@-o-keyframes loader4-spinner-fade-12{0%{background:#fff}8%{background:rgba(54,28,83,.08)}17%{background:rgba(74,50,100,.17)}25%{background:rgba(92,70,115,.25)}33%{background:rgba(109,90,130,.33)}42%{background:rgba(129,112,147,.42)}50%{background:rgba(146,132,162,.5)}58%{background:rgba(163,151,176,.58)}67%{background:rgba(183,173,193,.67)}75%{background:rgba(201,193,208,.75)}83%{background:rgba(218,213,223,.83)}92%{background:rgba(238,235,240,.92)}100%{background:#fff}}@keyframes loader4-spinner-fade-12{0%{background:#fff}8%{background:rgba(54,28,83,.08)}17%{background:rgba(74,50,100,.17)}25%{background:rgba(92,70,115,.25)}33%{background:rgba(109,90,130,.33)}42%{background:rgba(129,112,147,.42)}50%{background:rgba(146,132,162,.5)}58%{background:rgba(163,151,176,.58)}67%{background:rgba(183,173,193,.67)}75%{background:rgba(201,193,208,.75)}83%{background:rgba(218,213,223,.83)}92%{background:rgba(238,235,240,.92)}100%{background:#fff}}.loader5-spinner-container{width:50px;height:50px;margin:-30px 0px 0px -30px;border:5px rgb(137, 137, 137) solid}.loader5-spinner-container>*:nth-of-type(1){z-index:2001;width:50px;height:50px;margin:-30px -30px;border:5px solid rgba(0,0,0,0);border-top-color:rgb(255, 255, 255);animation:loader5-spinner-spin 0.5s linear infinite}@-webkit-keyframes loader5-spinner-spin{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes loader5-spinner-spin{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-ms-keyframes loader5-spinner-spin{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes loader5-spinner-spin{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loader5-spinner-spin{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}.loader6-shape-container>*:nth-of-type(1){background-color:#fff;width:16px;height:16px;border:2px #fff solid;margin:-10px 0px 0px -50px}.loader6-shape-container>*:nth-of-type(2){background-color:#fff;width:16px;height:16px;border:2px #fff solid;margin:-10px 0px 0px -50px}.loader6-shape-container>*:nth-of-type(3){background-color:#fff;width:16px;height:16px;border:2px #fff solid;margin:-10px 0px 0px -10px}.loader6-shape-container>*:nth-of-type(4){background-color:#fff;width:16px;height:16px;border:2px #fff solid;margin:-10px 0px 0px 30px}.loader6-shape-container>*:nth-of-type(5){background-color:#fff;width:16px;height:16px;border:2px #fff solid;margin:-10px 0px 0px 30px}.loader6-shape-container>*:nth-of-type(1){animation:loader6-shape-animate-1 1s linear infinite}.loader6-shape-container>*:nth-of-type(2){animation:loader6-shape-animate-2 1s linear infinite}.loader6-shape-container>*:nth-of-type(3){animation:loader6-shape-animate-3 1s linear infinite}.loader6-shape-container>*:nth-of-type(4){animation:loader6-shape-animate-4 1s linear infinite}.loader6-shape-container>*:nth-of-type(5){animation:loader6-shape-animate-5 1s linear infinite}@-webkit-keyframes loader6-shape-animate-1{0%{transform:translateX(0px) scale(0, 0)}20%{transform:translateX(0px) scale(1, 1)}40%{transform:translateX(40px) scale(1, 1)}60%{transform:translateX(80px) scale(1, 1)}80%{transform:translateX(80px) scale(0, 0)}100%{transform:translateX(0px) scale(0, 0)}}@-moz-keyframes loader6-shape-animate-1{0%{transform:translateX(0px) scale(0, 0)}20%{transform:translateX(0px) scale(1, 1)}40%{transform:translateX(40px) scale(1, 1)}60%{transform:translateX(80px) scale(1, 1)}80%{transform:translateX(80px) scale(0, 0)}100%{transform:translateX(0px) scale(0, 0)}}@-ms-keyframes loader6-shape-animate-1{0%{transform:translateX(0px) scale(0, 0)}20%{transform:translateX(0px) scale(1, 1)}40%{transform:translateX(40px) scale(1, 1)}60%{transform:translateX(80px) scale(1, 1)}80%{transform:translateX(80px) scale(0, 0)}100%{transform:translateX(0px) scale(0, 0)}}@-o-keyframes loader6-shape-animate-1{0%{transform:translateX(0px) scale(0, 0)}20%{transform:translateX(0px) scale(1, 1)}40%{transform:translateX(40px) scale(1, 1)}60%{transform:translateX(80px) scale(1, 1)}80%{transform:translateX(80px) scale(0, 0)}100%{transform:translateX(0px) scale(0, 0)}}@keyframes loader6-shape-animate-1{0%{transform:translateX(0px) scale(0, 0)}20%{transform:translateX(0px) scale(1, 1)}40%{transform:translateX(40px) scale(1, 1)}60%{transform:translateX(80px) scale(1, 1)}80%{transform:translateX(80px) scale(0, 0)}100%{transform:translateX(0px) scale(0, 0)}}@-webkit-keyframes loader6-shape-animate-2{0%{transform:translateX(0px) scale(1, 1)}20%{transform:translateX(40px) scale(1, 1)}40%{transform:translateX(80px) scale(1, 1)}60%{transform:translateX(80px) scale(0, 0)}80%{transform:translateX(0px) scale(0, 0)}100%{transform:translateX(0px) scale(1, 1)}}@-moz-keyframes loader6-shape-animate-2{0%{transform:translateX(0px) scale(1, 1)}20%{transform:translateX(40px) scale(1, 1)}40%{transform:translateX(80px) scale(1, 1)}60%{transform:translateX(80px) scale(0, 0)}80%{transform:translateX(0px) scale(0, 0)}100%{transform:translateX(0px) scale(1, 1)}}@-ms-keyframes loader6-shape-animate-2{0%{transform:translateX(0px) scale(1, 1)}20%{transform:translateX(40px) scale(1, 1)}40%{transform:translateX(80px) scale(1, 1)}60%{transform:translateX(80px) scale(0, 0)}80%{transform:translateX(0px) scale(0, 0)}100%{transform:translateX(0px) scale(1, 1)}}@-o-keyframes loader6-shape-animate-2{0%{transform:translateX(0px) scale(1, 1)}20%{transform:translateX(40px) scale(1, 1)}40%{transform:translateX(80px) scale(1, 1)}60%{transform:translateX(80px) scale(0, 0)}80%{transform:translateX(0px) scale(0, 0)}100%{transform:translateX(0px) scale(1, 1)}}@keyframes loader6-shape-animate-2{0%{transform:translateX(0px) scale(1, 1)}20%{transform:translateX(40px) scale(1, 1)}40%{transform:translateX(80px) scale(1, 1)}60%{transform:translateX(80px) scale(0, 0)}80%{transform:translateX(0px) scale(0, 0)}100%{transform:translateX(0px) scale(1, 1)}}@-webkit-keyframes loader6-shape-animate-3{0%{transform:translateX(0px) scale(1, 1)}20%{transform:translateX(40px) scale(1, 1)}40%{transform:translateX(40px) scale(0, 0)}60%{transform:translateX(-40px) scale(0, 0)}80%{transform:translateX(-40px) scale(1, 1)}100%{transform:translateX(0px) scale(1, 1)}}@-moz-keyframes loader6-shape-animate-3{0%{transform:translateX(0px) scale(1, 1)}20%{transform:translateX(40px) scale(1, 1)}40%{transform:translateX(40px) scale(0, 0)}60%{transform:translateX(-40px) scale(0, 0)}80%{transform:translateX(-40px) scale(1, 1)}100%{transform:translateX(0px) scale(1, 1)}}@-ms-keyframes loader6-shape-animate-3{0%{transform:translateX(0px) scale(1, 1)}20%{transform:translateX(40px) scale(1, 1)}40%{transform:translateX(40px) scale(0, 0)}60%{transform:translateX(-40px) scale(0, 0)}80%{transform:translateX(-40px) scale(1, 1)}100%{transform:translateX(0px) scale(1, 1)}}@-o-keyframes loader6-shape-animate-3{0%{transform:translateX(0px) scale(1, 1)}20%{transform:translateX(40px) scale(1, 1)}40%{transform:translateX(40px) scale(0, 0)}60%{transform:translateX(-40px) scale(0, 0)}80%{transform:translateX(-40px) scale(1, 1)}100%{transform:translateX(0px) scale(1, 1)}}@keyframes loader6-shape-animate-3{0%{transform:translateX(0px) scale(1, 1)}20%{transform:translateX(40px) scale(1, 1)}40%{transform:translateX(40px) scale(0, 0)}60%{transform:translateX(-40px) scale(0, 0)}80%{transform:translateX(-40px) scale(1, 1)}100%{transform:translateX(0px) scale(1, 1)}}@-webkit-keyframes loader6-shape-animate-4{0%{transform:translateX(0px) scale(1, 1)}20%{transform:translateX(0px) scale(0, 0)}40%{transform:translateX(-80px) scale(0, 0)}60%{transform:translateX(-80px) scale(1, 1)}80%{transform:translateX(-40px) scale(1, 1)}100%{transform:translateX(0px) scale(1, 1)}}@-moz-keyframes loader6-shape-animate-4{0%{transform:translateX(0px) scale(1, 1)}20%{transform:translateX(0px) scale(0, 0)}40%{transform:translateX(-80px) scale(0, 0)}60%{transform:translateX(-80px) scale(1, 1)}80%{transform:translateX(-40px) scale(1, 1)}100%{transform:translateX(0px) scale(1, 1)}}@-ms-keyframes loader6-shape-animate-4{0%{transform:translateX(0px) scale(1, 1)}20%{transform:translateX(0px) scale(0, 0)}40%{transform:translateX(-80px) scale(0, 0)}60%{transform:translateX(-80px) scale(1, 1)}80%{transform:translateX(-40px) scale(1, 1)}100%{transform:translateX(0px) scale(1, 1)}}@-o-keyframes loader6-shape-animate-4{0%{transform:translateX(0px) scale(1, 1)}20%{transform:translateX(0px) scale(0, 0)}40%{transform:translateX(-80px) scale(0, 0)}60%{transform:translateX(-80px) scale(1, 1)}80%{transform:translateX(-40px) scale(1, 1)}100%{transform:translateX(0px) scale(1, 1)}}@keyframes loader6-shape-animate-4{0%{transform:translateX(0px) scale(1, 1)}20%{transform:translateX(0px) scale(0, 0)}40%{transform:translateX(-80px) scale(0, 0)}60%{transform:translateX(-80px) scale(1, 1)}80%{transform:translateX(-40px) scale(1, 1)}100%{transform:translateX(0px) scale(1, 1)}}@-webkit-keyframes loader6-shape-animate-5{0%{transform:translateX(0px) scale(0, 0)}20%{transform:translateX(-80px) scale(0, 0)}40%{transform:translateX(-80px) scale(1, 1)}60%{transform:translateX(-40px) scale(1, 1)}80%{transform:translateX(0px) scale(1, 1)}100%{transform:translateX(0px) scale(0, 0)}}@-moz-keyframes loader6-shape-animate-5{0%{transform:translateX(0px) scale(0, 0)}20%{transform:translateX(-80px) scale(0, 0)}40%{transform:translateX(-80px) scale(1, 1)}60%{transform:translateX(-40px) scale(1, 1)}80%{transform:translateX(0px) scale(1, 1)}100%{transform:translateX(0px) scale(0, 0)}}@-ms-keyframes loader6-shape-animate-5{0%{transform:translateX(0px) scale(0, 0)}20%{transform:translateX(-80px) scale(0, 0)}40%{transform:translateX(-80px) scale(1, 1)}60%{transform:translateX(-40px) scale(1, 1)}80%{transform:translateX(0px) scale(1, 1)}100%{transform:translateX(0px) scale(0, 0)}}@-o-keyframes loader6-shape-animate-5{0%{transform:translateX(0px) scale(0, 0)}20%{transform:translateX(-80px) scale(0, 0)}40%{transform:translateX(-80px) scale(1, 1)}60%{transform:translateX(-40px) scale(1, 1)}80%{transform:translateX(0px) scale(1, 1)}100%{transform:translateX(0px) scale(0, 0)}}@keyframes loader6-shape-animate-5{0%{transform:translateX(0px) scale(0, 0)}20%{transform:translateX(-80px) scale(0, 0)}40%{transform:translateX(-80px) scale(1, 1)}60%{transform:translateX(-40px) scale(1, 1)}80%{transform:translateX(0px) scale(1, 1)}100%{transform:translateX(0px) scale(0, 0)}}.loader7-bars-container>*:nth-of-type(1){border-radius:2px;background-color:#c8cc92;width:2px;height:20px;border:2px #c8cc92 solid;margin:-12px 0px 0px -27px}.loader7-bars-container>*:nth-of-type(2){border-radius:2px;background-color:#c8cc92;width:2px;height:20px;border:2px #c8cc92 solid;margin:-12px 0px 0px -15px}.loader7-bars-container>*:nth-of-type(3){border-radius:2px;background-color:#c8cc92;width:2px;height:20px;border:2px #c8cc92 solid;margin:-12px 0px 0px -3px}.loader7-bars-container>*:nth-of-type(4){border-radius:2px;background-color:#c8cc92;width:2px;height:20px;border:2px #c8cc92 solid;margin:-12px 0px 0px 9px}.loader7-bars-container>*:nth-of-type(5){border-radius:2px;background-color:#c8cc92;width:2px;height:20px;border:2px #c8cc92 solid;margin:-12px 0px 0px 21px}.loader7-bars-container>*:nth-of-type(1){animation:loader7-bars-scale1;animation-duration:0.5s;animation-timing-function:linear;animation-iteration-count:infinite}.loader7-bars-container>*:nth-of-type(2){animation:loader7-bars-scale2;animation-duration:0.5s;animation-timing-function:linear;animation-iteration-count:infinite}.loader7-bars-container>*:nth-of-type(3){animation:loader7-bars-scale3;animation-duration:0.5s;animation-timing-function:linear;animation-iteration-count:infinite}.loader7-bars-container>*:nth-of-type(4){animation:loader7-bars-scale4;animation-duration:0.5s;animation-timing-function:linear;animation-iteration-count:infinite}.loader7-bars-container>*:nth-of-type(5){animation:loader7-bars-scale5;animation-duration:0.5s;animation-timing-function:linear;animation-iteration-count:infinite}@-webkit-keyframes loader7-bars-scale1{0%{transform:scale(1, 0)}16.67%{transform:scale(1, 0.3333333333)}33.33%{transform:scale(1, 0.6666666667)}50%{transform:scale(1, 1)}66.67%{transform:scale(1, 0.6666666667)}83.33%{transform:scale(1, 0.3333333333)}100%{transform:scale(1, 0)}}@-moz-keyframes loader7-bars-scale1{0%{transform:scale(1, 0)}16.67%{transform:scale(1, 0.3333333333)}33.33%{transform:scale(1, 0.6666666667)}50%{transform:scale(1, 1)}66.67%{transform:scale(1, 0.6666666667)}83.33%{transform:scale(1, 0.3333333333)}100%{transform:scale(1, 0)}}@-ms-keyframes loader7-bars-scale1{0%{transform:scale(1, 0)}16.67%{transform:scale(1, 0.3333333333)}33.33%{transform:scale(1, 0.6666666667)}50%{transform:scale(1, 1)}66.67%{transform:scale(1, 0.6666666667)}83.33%{transform:scale(1, 0.3333333333)}100%{transform:scale(1, 0)}}@-o-keyframes loader7-bars-scale1{0%{transform:scale(1, 0)}16.67%{transform:scale(1, 0.3333333333)}33.33%{transform:scale(1, 0.6666666667)}50%{transform:scale(1, 1)}66.67%{transform:scale(1, 0.6666666667)}83.33%{transform:scale(1, 0.3333333333)}100%{transform:scale(1, 0)}}@keyframes loader7-bars-scale1{0%{transform:scale(1, 0)}16.67%{transform:scale(1, 0.3333333333)}33.33%{transform:scale(1, 0.6666666667)}50%{transform:scale(1, 1)}66.67%{transform:scale(1, 0.6666666667)}83.33%{transform:scale(1, 0.3333333333)}100%{transform:scale(1, 0)}}@-webkit-keyframes loader7-bars-scale2{0%{transform:scale(1, 0.3333333333)}16.67%{transform:scale(1, 0.6666666667)}33.33%{transform:scale(1, 1)}50%{transform:scale(1, 0.6666666667)}66.67%{transform:scale(1, 0.3333333333)}83.33%{transform:scale(1, 0)}100%{transform:scale(1, 0.3333333333)}}@-moz-keyframes loader7-bars-scale2{0%{transform:scale(1, 0.3333333333)}16.67%{transform:scale(1, 0.6666666667)}33.33%{transform:scale(1, 1)}50%{transform:scale(1, 0.6666666667)}66.67%{transform:scale(1, 0.3333333333)}83.33%{transform:scale(1, 0)}100%{transform:scale(1, 0.3333333333)}}@-ms-keyframes loader7-bars-scale2{0%{transform:scale(1, 0.3333333333)}16.67%{transform:scale(1, 0.6666666667)}33.33%{transform:scale(1, 1)}50%{transform:scale(1, 0.6666666667)}66.67%{transform:scale(1, 0.3333333333)}83.33%{transform:scale(1, 0)}100%{transform:scale(1, 0.3333333333)}}@-o-keyframes loader7-bars-scale2{0%{transform:scale(1, 0.3333333333)}16.67%{transform:scale(1, 0.6666666667)}33.33%{transform:scale(1, 1)}50%{transform:scale(1, 0.6666666667)}66.67%{transform:scale(1, 0.3333333333)}83.33%{transform:scale(1, 0)}100%{transform:scale(1, 0.3333333333)}}@keyframes loader7-bars-scale2{0%{transform:scale(1, 0.3333333333)}16.67%{transform:scale(1, 0.6666666667)}33.33%{transform:scale(1, 1)}50%{transform:scale(1, 0.6666666667)}66.67%{transform:scale(1, 0.3333333333)}83.33%{transform:scale(1, 0)}100%{transform:scale(1, 0.3333333333)}}@-webkit-keyframes loader7-bars-scale3{0%{transform:scale(1, 0.6666666667)}16.67%{transform:scale(1, 1)}33.33%{transform:scale(1, 0.6666666667)}50%{transform:scale(1, 0.3333333333)}66.67%{transform:scale(1, 0)}83.33%{transform:scale(1, 0.3333333333)}100%{transform:scale(1, 0.6666666667)}}@-moz-keyframes loader7-bars-scale3{0%{transform:scale(1, 0.6666666667)}16.67%{transform:scale(1, 1)}33.33%{transform:scale(1, 0.6666666667)}50%{transform:scale(1, 0.3333333333)}66.67%{transform:scale(1, 0)}83.33%{transform:scale(1, 0.3333333333)}100%{transform:scale(1, 0.6666666667)}}@-ms-keyframes loader7-bars-scale3{0%{transform:scale(1, 0.6666666667)}16.67%{transform:scale(1, 1)}33.33%{transform:scale(1, 0.6666666667)}50%{transform:scale(1, 0.3333333333)}66.67%{transform:scale(1, 0)}83.33%{transform:scale(1, 0.3333333333)}100%{transform:scale(1, 0.6666666667)}}@-o-keyframes loader7-bars-scale3{0%{transform:scale(1, 0.6666666667)}16.67%{transform:scale(1, 1)}33.33%{transform:scale(1, 0.6666666667)}50%{transform:scale(1, 0.3333333333)}66.67%{transform:scale(1, 0)}83.33%{transform:scale(1, 0.3333333333)}100%{transform:scale(1, 0.6666666667)}}@keyframes loader7-bars-scale3{0%{transform:scale(1, 0.6666666667)}16.67%{transform:scale(1, 1)}33.33%{transform:scale(1, 0.6666666667)}50%{transform:scale(1, 0.3333333333)}66.67%{transform:scale(1, 0)}83.33%{transform:scale(1, 0.3333333333)}100%{transform:scale(1, 0.6666666667)}}@-webkit-keyframes loader7-bars-scale4{0%{transform:scale(1, 1)}16.67%{transform:scale(1, 0.6666666667)}33.33%{transform:scale(1, 0.3333333333)}50%{transform:scale(1, 0)}66.67%{transform:scale(1, 0.3333333333)}83.33%{transform:scale(1, 0.6666666667)}100%{transform:scale(1, 1)}}@-moz-keyframes loader7-bars-scale4{0%{transform:scale(1, 1)}16.67%{transform:scale(1, 0.6666666667)}33.33%{transform:scale(1, 0.3333333333)}50%{transform:scale(1, 0)}66.67%{transform:scale(1, 0.3333333333)}83.33%{transform:scale(1, 0.6666666667)}100%{transform:scale(1, 1)}}@-ms-keyframes loader7-bars-scale4{0%{transform:scale(1, 1)}16.67%{transform:scale(1, 0.6666666667)}33.33%{transform:scale(1, 0.3333333333)}50%{transform:scale(1, 0)}66.67%{transform:scale(1, 0.3333333333)}83.33%{transform:scale(1, 0.6666666667)}100%{transform:scale(1, 1)}}@-o-keyframes loader7-bars-scale4{0%{transform:scale(1, 1)}16.67%{transform:scale(1, 0.6666666667)}33.33%{transform:scale(1, 0.3333333333)}50%{transform:scale(1, 0)}66.67%{transform:scale(1, 0.3333333333)}83.33%{transform:scale(1, 0.6666666667)}100%{transform:scale(1, 1)}}@keyframes loader7-bars-scale4{0%{transform:scale(1, 1)}16.67%{transform:scale(1, 0.6666666667)}33.33%{transform:scale(1, 0.3333333333)}50%{transform:scale(1, 0)}66.67%{transform:scale(1, 0.3333333333)}83.33%{transform:scale(1, 0.6666666667)}100%{transform:scale(1, 1)}}@-webkit-keyframes loader7-bars-scale5{0%{transform:scale(1, 0.6666666667)}16.67%{transform:scale(1, 0.3333333333)}33.33%{transform:scale(1, 0)}50%{transform:scale(1, 0.3333333333)}66.67%{transform:scale(1, 0.6666666667)}83.33%{transform:scale(1, 1)}100%{transform:scale(1, 0.6666666667)}}@-moz-keyframes loader7-bars-scale5{0%{transform:scale(1, 0.6666666667)}16.67%{transform:scale(1, 0.3333333333)}33.33%{transform:scale(1, 0)}50%{transform:scale(1, 0.3333333333)}66.67%{transform:scale(1, 0.6666666667)}83.33%{transform:scale(1, 1)}100%{transform:scale(1, 0.6666666667)}}@-ms-keyframes loader7-bars-scale5{0%{transform:scale(1, 0.6666666667)}16.67%{transform:scale(1, 0.3333333333)}33.33%{transform:scale(1, 0)}50%{transform:scale(1, 0.3333333333)}66.67%{transform:scale(1, 0.6666666667)}83.33%{transform:scale(1, 1)}100%{transform:scale(1, 0.6666666667)}}@-o-keyframes loader7-bars-scale5{0%{transform:scale(1, 0.6666666667)}16.67%{transform:scale(1, 0.3333333333)}33.33%{transform:scale(1, 0)}50%{transform:scale(1, 0.3333333333)}66.67%{transform:scale(1, 0.6666666667)}83.33%{transform:scale(1, 1)}100%{transform:scale(1, 0.6666666667)}}@keyframes loader7-bars-scale5{0%{transform:scale(1, 0.6666666667)}16.67%{transform:scale(1, 0.3333333333)}33.33%{transform:scale(1, 0)}50%{transform:scale(1, 0.3333333333)}66.67%{transform:scale(1, 0.6666666667)}83.33%{transform:scale(1, 1)}100%{transform:scale(1, 0.6666666667)}}/*# sourceMappingURL=loader.css.map */ .loader-container{display: flex;justify-content: center;align-items: center;position: relative;}

/* Layout classes */
body {
  background-color: rgb(250, 250, 250);
}
main{
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Utility classes */
.d-none{
  display:none;
}

.container{
  background-color: rgb(245, 245, 245);
  max-width: 100%;
  margin: 1rem;
  padding: 1rem;
  border: 1px black solid;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.container input {
  margin-top: 1rem;
  width: 100%;
  padding: 0.25rem 0;
}

.container input[type*="submit"]{
  border: 2px black solid;
}

.container input[type*="submit"]:hover{
  border: 2px black solid;
  background-color: rgb(230, 230, 230);
  cursor: pointer;
}
.container .progress-bar{
  padding: 2rem 0;
}

.container .results{
  padding: 1rem 0;
}

</style>
</head>

<body>

<main>


  <div class="container">
    <h2>Name Generator</h2>
    <input class="js-name-generate" type="submit" value="Randomize">

    <div class="progress-bar d-none">
    </div>
   
    <p class="results js-results"></p>
 
  
  </div>
</main>


<!-- javascript scripts -->
<script>

/*   

Tutorial Description

Add a spinner effect to your site when loading web content, such as loading an app, submitting a form, or saving updates.

*/

      const sampleDate = ["Christine", "Bob", "Peter", "Brian", "Richard", "Valentine", "Michael", "David", "Henry", "Chester"];

      const submit = document.querySelector(".js-name-generate");
      const progress_bar = document.querySelector(".progress-bar");
      const results = document.querySelector(".js-results");

      submit.addEventListener("click", event => {

        results.innerHTML = "";
        
        createLoader(progress_bar);

        // Simulate network call for 3 seconds
        setTimeout( () => {

          progress_bar.innerHTML = "";
          progress_bar.classList.add("d-none");
          results.textContent = "Results: " + sampleDate[Math.floor(Math.random() * sampleDate.length)];
        }, 3000);

        event.preventDefault();
      })


      /**
     * Creates the loader
     * 
     * @param (function) func - reference to the function passed to be delayed.
     * @param (number) timeout - the timeout delay in milliseconds.
     * @returns
     */
     function createLoader(node){
        node.classList.remove("d-none");
        node.innerHTML = "";

        const loader_container = document.createElement("div");
        const loader_spinner_container = document.createElement("div");

        loader_container.classList.add("loader-container", "force-gpu");
        loader_spinner_container.classList.add("loader4-spinner-container");

        for(let i = 0; i < 12; i++){
          loader_spinner_container.appendChild(document.createElement("div"));
        }

        loader_container.appendChild(loader_spinner_container);

        node.appendChild(loader_container);
     }

</script>
</body>
</html><a target='_blank' href='https://www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>                                                
                                            

Example:


About @phuang

Help desk analyst transitioning to a full-stack developer role. Hoping to learn and collaborate with everyone. Happy coding!

P

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: admin_js, bloxio, yqaice, flooketsu, phuang_test
advertisement 2