Preloader

.../b:skin>...>

<style>
/* preloader by  */
.wc-pre-wrap{position:fixed;height:100%;width:100%;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:9999999;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);-webkit-animation: fade 3s forwards;-moz-animation: fade 3s forwards;-o-animation: fade 3s forwards;animation: fade 3s forwards;}
.wc-pre-wrap .wc-pre-start{position:relative;top:50%;left:50%;padding:30px;display:flex;background:transparent;flex-direction:column;align-items:center;transform: translate(-50% , -50%) scale(0.97);transition:all 0.3s ease}
.wc-pre-wrap .wc-pre-start svg{width:100px;height:100px;margin:auto;display:inline-block}
@-webkit-keyframes fade{0%{opacity:1}50%{opacity:1}100%{opacity:0}}@-moz-keyframes fade{0%{opacity:1}50%{opacity:1}100%{opacity:0}}@-o-keyframes fade{0%{opacity:1}50%{opacity:1}100%{opacity:0}}@keyframes fade{0%{opacity:1}50%{opacity:1}100%{opacity:0}}
</style>

he code <body><body>
  
    <div class='wc-pre-wrap'>
<div class='wc-pre-start'>
<svg enable-background='new 0 0 100 100' id='L1' version='1.1' viewBox='0 0 100 100' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'>
    <circle cx='50' cy='50' fill='none' r='47' stroke='#fff' stroke-dasharray='14.2472,14.2472' stroke-miterlimit='15' stroke-width='6'>
      <animateTransform attributeName='transform' attributeType='XML' dur='5s' from='0 50 50' repeatCount='indefinite' to='360 50 50' type='rotate'/>
  </circle>
  <circle cx='50' cy='50' fill='none' r='39' stroke='#fff' stroke-dasharray='10,10' stroke-miterlimit='10' stroke-width='1'>
      <animateTransform attributeName='transform' attributeType='XML' dur='5s' from='0 50 50' repeatCount='indefinite' to='-360 50 50' type='rotate'/>
  </circle>
  <g fill='#fff'>
  <rect height='30' width='5' x='30' y='35'>
    <animateTransform attributeName='transform' begin='0.1' dur='1s' repeatCount='indefinite' type='translate' values='0 5 ; 0 -5; 0 5'/>
  </rect>
  <rect height='30' width='5' x='40' y='35'>
    <animateTransform attributeName='transform' begin='0.2' dur='1s' repeatCount='indefinite' type='translate' values='0 5 ; 0 -5; 0 5'/>
  </rect>
  <rect height='30' width='5' x='50' y='35'>
    <animateTransform attributeName='transform' begin='0.3' dur='1s' repeatCount='indefinite' type='translate' values='0 5 ; 0 -5; 0 5'/>
  </rect>
  <rect height='30' width='5' x='60' y='35'>
    <animateTransform attributeName='transform' begin='0.4' dur='1s' repeatCount='indefinite' type='translate' values='0 5 ; 0 -5; 0 5'/>
  </rect>
  <rect height='30' width='5' x='70' y='35'>
    <animateTransform attributeName='transform' begin='0.5' dur='1s' repeatCount='indefinite' type='translate' values='0 5 ; 0 -5; 0 5'/>
  </rect>
  </g>
</svg>
</div>  
</div>

</div>  
</div>

</div>  
</div>

</div>  
</div>

code <body>--

demo

Code Preview

Popular Posts

Pages

Preloader