How To Make Stylish Safelink Page Like Plus Ui Safelink Page?

Hey My Dear Friends, Welcome to Muhammad Saleem Official - Learn For More!

moment we're agitating on the content" How to make safelink like Plus UI?". Hope this composition would be useful for both you and your participated bones ! Do check our blog regularly in case there might be an update.

  • So first of all, we all know that Plus UI is getting fleetly notorious.
  • It uses safelink of two kinds-- one primer and one bus safelink.
  • for primer, you need to produce two runners-- one is safelink creator runner and other is diverted destination runner.

Now Just Follow Step 1:

  • First Make A Page.Example:[Safelink Generator ] And Past The Code On Your Safelink Page

	<style>     
.status {
		    height: 3px;
			width: 3em;
			border-radius: 1px;
			background-color: inherit;
			animation-duration: 1s;
			animation-timing-function: ease-in-out;
			margin: 3px auto 6px 4px;
		}

@keyframes success {
			0% {
				background-color: inherit;
			}

			10% {
				background-color: rgb(18, 206, 96);
				;
			}

			100% {
				background-color: inherit;
			}
		}

@keyframes fail {
			0% {
				background-color: inherit;
			}

			10% {
				background-color: rgb(221, 55, 13);
				;
			}

			100% {
				background-color: inherit;
			}
		}
	</style>

<svg style='width:100%;height:70px;margin-bottom:30px;' class='line' viewBox='0 0 24 24'><g transform='translate(3.500000, 2.000000)'><path d='M8.4845,19.6057 C10.8195,19.6057 16.1565,17.2837 16.1565,10.8787 C16.1565,4.4747 16.4345,3.9737 15.8195,3.3577 C15.2035,2.7417 11.9935,0.7507 8.4845,0.7507 C4.9755,0.7507 1.7655,2.7417 1.1505,3.3577 C0.5345,3.9737 0.8125,4.4747 0.8125,10.8787 C0.8125,17.2837 6.1505,19.6057 8.4845,19.6057 Z'/><polyline class='svgC' points='5.8859 9.8748 7.7779 11.7698 11.6759 7.8698'/></g></svg>

<div id="cArea">
	<div>
		<input id="link-to" type="text" placeholder="Enter your link" />
	</div>

<!--[Config]-->
<div id="advanced" style="display:none;">
		<label>Input your redirect page link</label>
		<br>
		<input id="link-page" type="text" value="
https://muhammadsaleemofficial.blogspot.com/p/download.html"disabled="">
	</div>
</div>
  
<div id="">
	<button id="create-link" class="button">Generate</button>
	<div class="status" id="notifi"></div>
</div>

<div id="cArea">
	<textarea id="result" style="word-break: break-all;"
		onkeyup="document.getElementById('open').href = this.value || 'javascript:0'"></textarea>
	<div>
		<a name="result" class="copy-btn button" href="javascript:()">Copy</a>
		<a id="open" class="copy-btn outline button" target="_blank">Open</a>
	</div>

</div>

<script>
	function validate() {
		if (document.getElementById("link-to").value.length == 0) {
			return false
		}
		if (document.getElementById("link-page").value.length == 0) {
			return false
		}
		return true
	}

	var notifi = document.getElementById("notifi");
	document.getElementById("create-link").addEventListener("click", () => {
		if (!validate()) {
			document.getElementById("result").value = "";
			notifi.style["animation-name"] = null;
			notifi.offsetHeight;
			notifi.style["animation-name"] = "fail";
			return;
		}
		var linkPage = document.getElementById("link-page").value.trim();
		var linkTo = document.getElementById("link-to").value.trim();
		linkTo = linkTo.replace(/^((?!(\w+:))(\/\/)?)/, "http://"); // auto add http://
		var data = {
			url: linkTo,
		},
			base = btoa(encodeURIComponent(JSON.stringify(data))).replace(/={1,}$/, ""),
			queryVal = "~" + "=" + base,
			result;
		if (linkPage.indexOf("#") != -1) {
			var urlAndHash = linkPage.split("#", 2);

			if (urlAndHash[0].indexOf("?") != -1) {
				result = urlAndHash[0] + "&" + queryVal + "#" + urlAndHash[1];
			}
			else {
				result = urlAndHash[0] + "?" + queryVal + "#" + urlAndHash[1];
			}

		} else {
			if (linkPage.indexOf("?") != -1) {
				result = linkPage + "&" + queryVal;
			}
			else {
				result = linkPage + "?" + queryVal;
			}
		}

		document.getElementById("result").value = result;
		document.getElementById("open").href = result;
		notifi.style["animation-name"] = null;
		notifi.offsetHeight;
		notifi.style["animation-name"] = "success";
	});

	//@ntdm11 :>
</script>
<script>
	var a = document.getElementsByClassName('copy-btn');
	for (let i = 0; i < a.length; i++) {
		a[i].addEventListener('click', function () {
			var b = a[i].getAttribute("name");
			var text = document.getElementById(b);
			text.select();
			document.execCommand('copy');
		});
	}
</script>

Now Follow Step 2:
Create One More Page Or Post On Your Blog..

Now Past The Code On Your ( Download Page

 <head>
<style>
      #wait-btn {
        width: 112px;
        height: 36px;
        border-radius: 5px;
        margin: 2px auto;
        overflow: hidden;
        background-color: cornflowerblue
      }
  
      #waiting {
        display: flex;
        align-items: center;
        flex-direction: column;
      }
  
      #waiting>* {
        margin-bottom: 16px;
      }
  
      #waiting #loadingBar {
        max-width: 400px;
        width: 100%;
        height: 2px;
      }
  
      #link-btn {
        margin: 2px auto;
        display: flex;
        justify-content: center;
        align-items: center
      }
  
  
      #sec-wait {
        font-size: 32px;
        margin: 8px auto;
        align-items: center;
        display: flex;
        justify-content: center
      }
  
      #step {
        text-align: right
      }
  
      #loadingAnimation {
        height: 240px;
        padding: 60px;
        box-sizing: border-box;
        max-width: 600px;
        width: 100%;
        display: flex;
        justify-content: center;
      }
  
      .load {
        background-repeat: no-repeat;
        background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px;
        background-position: -315px 0, 0 0, 0px 190px, 50px 195px;
        animation: loading 1.5s infinite;
      }
  
      .load>a {
        cursor: default;
        color: transparent !important;
        outline: none !important;
      }
  
      .preAds {
        display: none;
        border: 2px dashed rgb(218, 170, 66);
      }
  
  
      @keyframes loading {
        to {
          background-position: 315px 0, 0 0, 0 190px, 50px 195px;
        }
      }
    </style>
  </head>

<div id="error">
    <div id="nof">
      <div style="font-size: 36px;">Opps...</div>
      <br>
      <div>The requested link is broken!</div>
      <br>
    </div>
    <hr>
  </div>
  <div id="success">
    <div id="step"></div>
    <h3><center>Please wait !</h3>
    <center>Drag the mouse down a bit, and wait for about 5 seconds!</center>
    <div id="waiting">
      <div id="loadingAnimation">
      </div>
  
      <div id="loadingNote">
      </div>
  
      <div id="loadingBar">
        <style scoped>
          .progress {
            background: #e1e4e8;
            border-radius: 3px;
            overflow: hidden;
            height: 100%;
          }
  
          .progress .progress-bar {
            display: block;
            height: 100%;
            background: linear-gradient(90deg, #ffd33d, #ea4aaa 17%, #b34bff 34%, #01feff 51%, #ffd33d 68%, #ea4aaa 85%, #b34bff);
            background-size: 300% 100%;
            -webkit-animation: progress-animation 2.5s linear infinite;
            animation: progress-animation 2.5s linear infinite;
          }
  
          .pre-progress-bar {
            opacity: 0;
            height: 100%;
            animation: progress-loader;
            -webkit-animation: progress-loader;
          }
  
          @-webkit-keyframes progress-animation {
            0% {
              background-position: 100%;
            }
  
            100% {
              background-position: 0;
            }
          }
  
          @keyframes progress-animation {
            0% {
              background-position: 100%;
            }
  
            100% {
              background-position: 0;
            }
          }
  
          @keyframes progress-loader {
            0% {
              transform: translateX(-100%);
              display: block;
              opacity: 1;
            }
  
            98% {
              transform: translateX(0);
              opacity: 1;
            }
  
            100% {
              opacity: 0;
            }
          }
        </style>
        <div class="progress">
          <div class="pre-progress-bar" id="preProgressBar"><span class="progress-bar"></span></div>
        </div>
      </div>
    </div>
    <div class="preAds" id="ads_2">
      <div class="ads" style="display:flex;">

      </div>
    </div>
  
    <div id="link-btn">
      <div class="load" id="link-href" style="padding: 0 12px; margin: 8px;">
        <a href="javascript:0" class="load button" id="goLink">Visit</a>
        <a href="javascript:0" class="load button outline" id="goBack">Go back</a>
      </div>
  
    </div>
    <div class="preAds" id="ads_3">
      <div class="ads">

      </div>
    </div>
    <br>
   <hr>
    <div id="content"> </div>
  <script>
    function getUrlParameter(sParam) {
      var sPageURL = window.location.search.substring(1),
          sURLVariables = sPageURL.split('&'),
          sParameterName,
          i;
  
      for (i = 0; i < sURLVariables.length; i++) {
  
        var arr = sURLVariables[i].split('='),
            sParameterName = arr.splice(0, 1);
        sParameterName.push(arr.join('='));
  
        if (sParameterName[0] === sParam) {
          return typeof sParameterName[1] === undefined ? flase : decodeURIComponent(sParameterName[1]);
        }
      }
      return false;
    };
    function sleep(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    }
  
    randomEmoij = ()=> {
      var items = [":\")", ":-]", ">.<", "(>'-'<)", ";-;", "♪", "+_+", ":3", "❤","<br/>"];
      return items[Math.floor(Math.random()*items.length)];
    }
    hashCode = s => s.split('').reduce((a,b)=>{a=((a<<5)-a)+b.charCodeAt(0);return a&a},0);
    stayTime = 12;
    
    (async () => {
      var note = document.getElementById('loadingNote');
      var nextUrl = getUrlParameter("~");
      if (!nextUrl) {
        document.getElementById("success").remove();
        document.getElementById("error").remove();
        return;
      }
      try {
        var json = decodeURIComponent(atob(nextUrl)),
            url = JSON.parse(json).url;
      } catch (er) {
  
      }
      if (url) {
        document.getElementById("error").remove();
        var fdlid = "fdl_" + Math.abs(hashCode(url));
        var preProgressBar = document.getElementById("preProgressBar");
  
        if (!localStorage.getItem(fdlid) || (new Date()).getTime() - localStorage.getItem("fdl_1907307024") >  1 * 30 * 60 * 1000) {
            var d = stayTime;
          preProgressBar.style["-webkit-animation-duration"] = d + "s";
          preProgressBar.style["animation-duration"] = d + "s";
          note.innerHTML = "Looking for your link..";
          await sleep(200 * d);
          note.innerHTML = "Loading your link";
          await sleep(400 * d);
          note.innerHTML = "Almost done..." + randomEmoij();
          await sleep(200 * d);
          note.innerHTML = randomEmoij();
          await sleep(50 * d);
          note.innerHTML = "Wait a minute!" + randomEmoij();
          await sleep(150 * d);
          note.innerHTML = "Link is ready to visit!";
        }
        else {
          var d = (Math.round(10 * stayTime) * 0.018);
          preProgressBar.style["-webkit-animation-duration"] = d + "s";
          preProgressBar.style["animation-duration"] = d + "s";
          note.innerHTML = "Looking for your link...";
          await sleep(1000 * d);
          note.innerHTML = "Link is ready to visit!";
        }
  
        document.getElementById("link-href").classList.remove("load");
        var golink = document.getElementById("goLink"),
            goBack = document.getElementById("goBack");
        golink.classList.remove("load");
        goBack.classList.remove("load");
        golink.href = url;
        goBack.href = "javascript:self.close()|(window.location.href='/')";
        localStorage.setItem(fdlid, (new Date()).getTime());
      }
      else {
        document.getElementById("success").remove();
      }
    })();
  
    function displayLink() {
    }
  </script>
  <script>
 if(document.getElementById("loadingAnimation")) document.getElementById("loadingAnimation").innerHTML = `<style scoped>div#cubeLoading{margin-top:12px;position:relative;height:150px;width:150px;transform:scale(0.5)}div#cubeLoading>div{display:flex;justify-content:center}div#cubeLoading .cube{position:absolute;width:86px;height:100px}div#cubeLoading .right{background:#e79c10;transform:rotate(-30deg) skewX(-30deg) translate(49px, 65px) scaleY(0.86)}div#cubeLoading .left{background:#d53a33;transform:rotate(90deg) skewX(-30deg) scaleY(0.86) translate(25px, -50px)}div#cubeLoading .top{background:#1d9099;transform:rotate(210deg) skew(-30deg) translate(-75px, -22px) scaleY(0.86);z-index:2}div#cubeLoading .face{height:50px;width:50px;position:absolute;transform-origin:0 0}div#cubeLoading .h1.w1.l1{z-index:-1;animation-name:h1w1l1;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h1w1l1{0%{transform:translate(0%,-100%)}14%{transform:translate(-50%,-125%)}28%{transform:translate(0%,-150%)}43%{transform:translate(0%,-200%)}57%{transform:translate(50%,-175%)}71%{transform:translate(0%,-150%)}85%{transform:translate(0%,-100%)}100%{transform:translate(0%,-100%)}}.h1.w1.l2{z-index:-1;animation-name:h1w1l2;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h1w1l2{0%{transform:translate(50%,-75%)}14%{transform:translate(50%,-75%)}28%{transform:translate(100%,-100%)}43%{transform:translate(100%,-150%)}57%{transform:translate(100%,-150%)}71%{transform:translate(50%,-125%)}85%{transform:translate(50%,-75%)}100%{transform:translate(50%,-75%)}}.h1.w1.l3{z-index:-1;animation-name:h1w1l3;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h1w1l3{0%{transform:translate(100%,-50%)}14%{transform:translate(150%,-25%)}28%{transform:translate(200%,-50%)}43%{transform:translate(200%,-100%)}57%{transform:translate(150%,-125%)}71%{transform:translate(100%,-100%)}85%{transform:translate(100%,-50%)}100%{transform:translate(100%,-50%)}}.h1.w2.l1{z-index:-1;animation-name:h1w2l1;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h1w2l1{0%{transform:translate(-50%,-75%)}14%{transform:translate(-100%,-100%)}28%{transform:translate(-100%,-100%)}43%{transform:translate(-100%,-150%)}57%{transform:translate(-50%,-125%)}71%{transform:translate(-50%,-125%)}85%{transform:translate(-50%,-75%)}100%{transform:translate(-50%,-75%)}}.h1.w2.l2{z-index:-1;animation-name:h1w2l2;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h1w2l2{0%{transform:translate(0%,-50%)}14%{transform:translate(0%,-50%)}28%{transform:translate(0%,-50%)}43%{transform:translate(0%,-100%)}57%{transform:translate(0%,-100%)}71%{transform:translate(0%,-100%)}85%{transform:translate(0%,-50%)}100%{transform:translate(0%,-50%)}}.h1.w2.l3{z-index:-1;animation-name:h1w2l3;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h1w2l3{0%{transform:translate(50%,-25%)}14%{transform:translate(100%,0%)}28%{transform:translate(100%,0%)}43%{transform:translate(100%,-50%)}57%{transform:translate(50%,-75%)}71%{transform:translate(50%,-75%)}85%{transform:translate(50%,-25%)}100%{transform:translate(50%,-25%)}}.h1.w3.l1{z-index:-1;animation-name:h1w3l1;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h1w3l1{0%{transform:translate(-100%,-50%)}14%{transform:translate(-150%,-75%)}28%{transform:translate(-200%,-50%)}43%{transform:translate(-200%,-100%)}57%{transform:translate(-150%,-75%)}71%{transform:translate(-100%,-100%)}85%{transform:translate(-100%,-50%)}100%{transform:translate(-100%,-50%)}}.h1.w3.l2{z-index:-1;animation-name:h1w3l2;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h1w3l2{0%{transform:translate(-50%,-25%)}14%{transform:translate(-50%,-25%)}28%{transform:translate(-100%,0%)}43%{transform:translate(-100%,-50%)}57%{transform:translate(-100%,-50%)}71%{transform:translate(-50%,-75%)}85%{transform:translate(-50%,-25%)}100%{transform:translate(-50%,-25%)}}.h1.w3.l3{z-index:-1;animation-name:h1w3l3;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h1w3l3{0%{transform:translate(0%,0%)}14%{transform:translate(50%,25%)}28%{transform:translate(0%,50%)}43%{transform:translate(0%,0%)}57%{transform:translate(-50%,-25%)}71%{transform:translate(0%,-50%)}85%{transform:translate(0%,0%)}100%{transform:translate(0%,0%)}}.h2.w1.l1{z-index:-2;animation-name:h2w1l1;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h2w1l1{0%{transform:translate(0%,-50%)}14%{transform:translate(-50%,-75%)}28%{transform:translate(0%,-100%)}43%{transform:translate(0%,-100%)}57%{transform:translate(50%,-75%)}71%{transform:translate(0%,-50%)}85%{transform:translate(0%,-50%)}100%{transform:translate(0%,-50%)}}.h2.w1.l2{z-index:-2;animation-name:h2w1l2;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h2w1l2{0%{transform:translate(50%,-25%)}14%{transform:translate(50%,-25%)}28%{transform:translate(100%,-50%)}43%{transform:translate(100%,-50%)}57%{transform:translate(100%,-50%)}71%{transform:translate(50%,-25%)}85%{transform:translate(50%,-25%)}100%{transform:translate(50%,-25%)}}.h2.w1.l3{z-index:-2;animation-name:h2w1l3;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h2w1l3{0%{transform:translate(100%,0%)}14%{transform:translate(150%,25%)}28%{transform:translate(200%,0%)}43%{transform:translate(200%,0%)}57%{transform:translate(150%,-25%)}71%{transform:translate(100%,0%)}85%{transform:translate(100%,0%)}100%{transform:translate(100%,0%)}}.h2.w2.l1{z-index:-2;animation-name:h2w2l1;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h2w2l1{0%{transform:translate(-50%,-25%)}14%{transform:translate(-100%,-50%)}28%{transform:translate(-100%,-50%)}43%{transform:translate(-100%,-50%)}57%{transform:translate(-50%,-25%)}71%{transform:translate(-50%,-25%)}85%{transform:translate(-50%,-25%)}100%{transform:translate(-50%,-25%)}}.h2.w2.l2{z-index:-2;animation-name:h2w2l2;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h2w2l2{0%{transform:translate(0%,0%)}14%{transform:translate(0%,0%)}28%{transform:translate(0%,0%)}43%{transform:translate(0%,0%)}57%{transform:translate(0%,0%)}71%{transform:translate(0%,0%)}85%{transform:translate(0%,0%)}100%{transform:translate(0%,0%)}}.h2.w2.l3{z-index:-2;animation-name:h2w2l3;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h2w2l3{0%{transform:translate(50%,25%)}14%{transform:translate(100%,50%)}28%{transform:translate(100%,50%)}43%{transform:translate(100%,50%)}57%{transform:translate(50%,25%)}71%{transform:translate(50%,25%)}85%{transform:translate(50%,25%)}100%{transform:translate(50%,25%)}}.h2.w3.l1{z-index:-2;animation-name:h2w3l1;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h2w3l1{0%{transform:translate(-100%,0%)}14%{transform:translate(-150%,-25%)}28%{transform:translate(-200%,0%)}43%{transform:translate(-200%,0%)}57%{transform:translate(-150%,25%)}71%{transform:translate(-100%,0%)}85%{transform:translate(-100%,0%)}100%{transform:translate(-100%,0%)}}.h2.w3.l2{z-index:-2;animation-name:h2w3l2;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h2w3l2{0%{transform:translate(-50%,25%)}14%{transform:translate(-50%,25%)}28%{transform:translate(-100%,50%)}43%{transform:translate(-100%,50%)}57%{transform:translate(-100%,50%)}71%{transform:translate(-50%,25%)}85%{transform:translate(-50%,25%)}100%{transform:translate(-50%,25%)}}.h2.w3.l3{z-index:-2;animation-name:h2w3l3;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h2w3l3{0%{transform:translate(0%,50%)}14%{transform:translate(50%,75%)}28%{transform:translate(0%,100%)}43%{transform:translate(0%,100%)}57%{transform:translate(-50%,75%)}71%{transform:translate(0%,50%)}85%{transform:translate(0%,50%)}100%{transform:translate(0%,50%)}}.h3.w1.l1{z-index:-3;animation-name:h3w1l1;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h3w1l1{0%{transform:translate(0%,0%)}14%{transform:translate(-50%,-25%)}28%{transform:translate(0%,-50%)}43%{transform:translate(0%,0%)}57%{transform:translate(50%,25%)}71%{transform:translate(0%,50%)}85%{transform:translate(0%,0%)}100%{transform:translate(0%,0%)}}.h3.w1.l2{z-index:-3;animation-name:h3w1l2;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h3w1l2{0%{transform:translate(50%,25%)}14%{transform:translate(50%,25%)}28%{transform:translate(100%,0%)}43%{transform:translate(100%,50%)}57%{transform:translate(100%,50%)}71%{transform:translate(50%,75%)}85%{transform:translate(50%,25%)}100%{transform:translate(50%,25%)}}.h3.w1.l3{z-index:-3;animation-name:h3w1l3;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h3w1l3{0%{transform:translate(100%,50%)}14%{transform:translate(150%,75%)}28%{transform:translate(200%,50%)}43%{transform:translate(200%,100%)}57%{transform:translate(150%,75%)}71%{transform:translate(100%,100%)}85%{transform:translate(100%,50%)}100%{transform:translate(100%,50%)}}.h3.w2.l1{z-index:-3;animation-name:h3w2l1;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h3w2l1{0%{transform:translate(-50%,25%)}14%{transform:translate(-100%,0%)}28%{transform:translate(-100%,0%)}43%{transform:translate(-100%,50%)}57%{transform:translate(-50%,75%)}71%{transform:translate(-50%,75%)}85%{transform:translate(-50%,25%)}100%{transform:translate(-50%,25%)}}.h3.w2.l2{z-index:-3;animation-name:h3w2l2;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h3w2l2{0%{transform:translate(0%,50%)}14%{transform:translate(0%,50%)}28%{transform:translate(0%,50%)}43%{transform:translate(0%,100%)}57%{transform:translate(0%,100%)}71%{transform:translate(0%,100%)}85%{transform:translate(0%,50%)}100%{transform:translate(0%,50%)}}.h3.w2.l3{z-index:-3;animation-name:h3w2l3;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h3w2l3{0%{transform:translate(50%,75%)}14%{transform:translate(100%,100%)}28%{transform:translate(100%,100%)}43%{transform:translate(100%,150%)}57%{transform:translate(50%,125%)}71%{transform:translate(50%,125%)}85%{transform:translate(50%,75%)}100%{transform:translate(50%,75%)}}.h3.w3.l1{z-index:-3;animation-name:h3w3l1;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h3w3l1{0%{transform:translate(-100%,50%)}14%{transform:translate(-150%,25%)}28%{transform:translate(-200%,50%)}43%{transform:translate(-200%,100%)}57%{transform:translate(-150%,125%)}71%{transform:translate(-100%,100%)}85%{transform:translate(-100%,50%)}100%{transform:translate(-100%,50%)}}.h3.w3.l2{z-index:-3;animation-name:h3w3l2;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h3w3l2{0%{transform:translate(-50%,75%)}14%{transform:translate(-50%,75%)}28%{transform:translate(-100%,100%)}43%{transform:translate(-100%,150%)}57%{transform:translate(-100%,150%)}71%{transform:translate(-50%,125%)}85%{transform:translate(-50%,75%)}100%{transform:translate(-50%,75%)}}.h3.w3.l3{z-index:-3;animation-name:h3w3l3;animation-timing-function:ease;animation-duration:3s;animation-iteration-count:infinite}@keyframes h3w3l3{0%{transform:translate(0%,100%)}14%{transform:translate(50%,125%)}28%{transform:translate(0%,150%)}43%{transform:translate(0%,200%)}57%{transform:translate(-50%,175%)}71%{transform:translate(0%,150%)}85%{transform:translate(0%,100%)}100%{transform:translate(0%, 100%)}}</style><div id="cubeLoading" class=""><div class="h1Container"><div class="cube h1 w1 l1"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h1 w1 l2"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h1 w1 l3"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h1 w2 l1"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h1 w2 l2"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h1 w2 l3"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h1 w3 l1"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h1 w3 l2"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h1 w3 l3"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div></div><div class="h2Container"><div class="cube h2 w1 l1"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h2 w1 l2"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h2 w1 l3"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h2 w2 l1"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h2 w2 l2"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h2 w2 l3"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h2 w3 l1"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h2 w3 l2"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h2 w3 l3"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div></div><div class="h3Container"><div class="cube h3 w1 l1"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h3 w1 l2"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h3 w1 l3"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h3 w2 l1"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h3 w2 l2"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h3 w2 l3"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h3 w3 l1"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h3 w3 l2"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div><div class="cube h3 w3 l3"><div class="face top"></div><div class="face left"></div><div class="face right"></div></div></div></div>`;
</script>

Just write your own content inside the marked portion.

[ Demo ]

Conclusion:
This is each about How to make a Safelink Like Plus Ui On blogger? I hope you enjoy this composition. Please do partake this composition. And if you're facing problem in any section or you have any question also ask us

إرسال تعليق

أحدث أقدم