Shimmer Extension - Set placeholder for loading views [PAID]

This extension allows you set the a kind of shimmer effect to loading views…
You can set shape,size,color,speed of the placeholder(you can set any color for the view or animation)

Thanks to @chaimk for sponsoring the extension :smile:

Blocks

Demo

Buy

PayPal - 12.5 USD
PayTM - 700 INR

10 Likes

Another Awesome extension!

2 Likes

Show the text shimmer also :grin:

1 Like

There is no text shimmer in the extension…
I think shimmer are for views :sweat_smile: Like this(Shown below)

2 Likes

Add it (Text Shimmer) :grin:

4 Likes

I think its called skeleton loading? am i right

4 Likes

Yeah, you are right.

2 Likes

Give me damo app not video

just pm him

@Atom_Developer don’t provide apk for demo
As far I know :sweat_smile:

2 Likes

Why don’t give me apk

because to make his extensions safe so that noone will decompile it

2 Likes

I don’t give demo app, as everyone said

1 Like

Easy make in WebView Load Html

blocks - 2021-03-07T150004.639

CODE
<link href="https://unpkg.com/placeholder-loading/dist/css/placeholder-loading.min.css" rel="stylesheet"> 
<style>
.ph-item{direction:ltr;position:relative;display:flex;flex-wrap:wrap;padding:30px 15px 15px;overflow:hidden;margin-bottom:30px;background-color:#fff;border:1px solid #e6e6e6;border-radius:2px}.ph-item,.ph-item *,.ph-item :after,.ph-item :before{box-sizing:border-box}.ph-item:before{content:" ";position:absolute;top:0;right:0;bottom:0;left:50%;z-index:1;width:500%;margin-left:-250%;-webkit-animation:phAnimation .8s linear infinite;animation:phAnimation .8s linear infinite;background:linear-gradient(90deg,hsla(0,0%,100%,0) 46%,hsla(0,0%,100%,.35) 50%,hsla(0,0%,100%,0) 54%) 50% 50%}.ph-item>*{flex:1 1 auto;display:flex;flex-flow:column;padding-right:15px;padding-left:15px}.ph-row{display:flex;flex-wrap:wrap;margin-bottom:7.5px}.ph-row div{height:10px;margin-bottom:7.5px;background-color:#ced4da}.ph-row .big,.ph-row.big div{height:20px;margin-bottom:15px}.ph-row .empty{background-color:hsla(0,0%,100%,0)}.ph-col-2{flex:0 0 16.66667%}.ph-col-4{flex:0 0 33.33333%}.ph-col-6{flex:0 0 50%}.ph-col-8{flex:0 0 66.66667%}.ph-col-10{flex:0 0 83.33333%}.ph-col-12{flex:0 0 100%}.ph-avatar{position:relative;width:100%;min-width:60px;background-color:#ced4da;margin-bottom:15px;border-radius:50%;overflow:hidden}.ph-avatar:before{content:" ";display:block;padding-top:100%}.ph-picture{width:100%;height:120px;background-color:#ced4da;margin-bottom:15px}@-webkit-keyframes phAnimation{0%{transform:translate3d(-30%,0,0)}to{transform:translate3d(30%,0,0)}}@keyframes phAnimation{0%{transform:translate3d(-30%,0,0)}to{transform:translate3d(30%,0,0)}}
</style>


<div class="ph-item">

 <div class="ph-col-2">
    <div class="ph-avatar"></div>
  </div>

  <div>
    <div class="ph-row">
      <div class="ph-col-4"></div>
      <div class="ph-col-8 empty"></div>
      <div class="ph-col-6"></div>
      <div class="ph-col-6 empty"></div>
      <div class="ph-col-2"></div>
      <div class="ph-col-10 empty"></div>
    </div>
  </div>

  <div class="ph-col-12">
    <div class="ph-picture"></div>
    <div class="ph-row">
      <div class="ph-col-10 big"></div>
      <div class="ph-col-2 empty big"></div>
      <div class="ph-col-4"></div>
      <div class="ph-col-8 empty"></div>
      <div class="ph-col-6"></div>
      <div class="ph-col-6 empty"></div>
      <div class="ph-col-12"></div>
    </div>
  </div>
	        <div class="ph-col-12">
    <div class="ph-picture"></div>
    <div class="ph-row">
      <div class="ph-col-10 big"></div>
      <div class="ph-col-2 empty big"></div>
      <div class="ph-col-4"></div>
      <div class="ph-col-8 empty"></div>
      <div class="ph-col-6"></div>
      <div class="ph-col-6 empty"></div>
      <div class="ph-col-12"></div>
    </div>
  </div>
	        <div class="ph-col-12">
    <div class="ph-picture"></div>
    <div class="ph-row">
      <div class="ph-col-10 big"></div>
      <div class="ph-col-2 empty big"></div>
      <div class="ph-col-4"></div>
      <div class="ph-col-8 empty"></div>
      <div class="ph-col-6"></div>
      <div class="ph-col-6 empty"></div>
      <div class="ph-col-12"></div>
    </div>
  </div>
	        <div class="ph-col-12">
    <div class="ph-picture"></div>
    <div class="ph-row">
      <div class="ph-col-10 big"></div>
      <div class="ph-col-2 empty big"></div>
      <div class="ph-col-4"></div>
      <div class="ph-col-8 empty"></div>
      <div class="ph-col-6"></div>
      <div class="ph-col-6 empty"></div>
      <div class="ph-col-12"></div>
    </div>
  </div>

2 Likes