Preloader

BACK

Create an awarded website from zero to hero | Preloader #1

do you find yourself often browsing,through a water website wishing someday,you'll be able to create something,similar well i sure did so in this,series we'll be going step by step,creating our own website implementing,different designs from different awarded,websites so stay tight let's have some,fun time coding,what we will be doing in this series is,starting with basic web development,setting up our project we'll learn about,different javascript libraries and also,choose front and back and frameworks,with suits or needs let's just get,started,what do all great websites have in,common a beautiful preloader so in the,first episode of our series we'll be,creating our website pre-loader which is,heavily inspired by dormial website,the preloader is the first experience a,user has with our website so it must be,something eye-catching and entertaining,so let's just get started um we're,creating preloader,this is the preloader we're going to be,creating,we're going to be using json for our,animations and also paste.js for the,loader,and let's just get started,so i'm using laravel for my local,development and also visual studio code,for my,id,let's create our html boilerplate,also our css file,and our javascript file,let's call the javascript file at the,footer,and our css file at the end of the,head okay,uh before we start coding we will want,the cdn of the json,and also,the page.js which you can find it uh in,google,and let's just get started um let's see,what we have here,we have the loading text the progress,bar which space.js,automatically injects,some elements in your html file,and the title called the steve,okay,it's pretty simple to implement,and let's get started,okay so let's put the title here of this,tip,let's create the title,which will appear when the loading is,done,and our preloader container,with the with the loading text,okay,and that's all for the html file now,let's go style this before we go let's,see what we have here,okay,so i want to change the font you can,choose whatever phone you like,there's no really,i mean you can choose whatever you want,it doesn't really matter,remove the margin and the padding from,the body,let's go style the title,you want to put the title at the center,of the page,so we give the position absolute,we give opacity of zero because we want,to,make it animate and appear,with json,and that's it for the,for the title,okay,it doesn't appear now because it has a,positive zero,so let's create our preloader container,we want to give it width of,100 viewport viewport width,and also the height,background is going to be black,you can play with these colors you can,do whatever you want it doesn't really,matter,whatever you like,like you would agree because we want to,put the loading text at the center of,the page,and that's it for now for this okay,and let's move our loading text now,all right,i give a little spacing because it looks,cooler,a color of white,i'm sorry color of white,i give a phone weight of 700,i'm r

The above is a brief introduction to Preloader

Let's move on to the first section of Preloader

Add Preloader HTML CSS & Javascript

hey what's going on guys portal maker,def here back with another video on how,to make this pretty cool legit awesome,sweet preloader so let me just show you,how it works real quick so when i,refresh the page just like this this,preloader will appear and it will just,load while the window is actually,loading and once it loads it will kind,of fade out with a pretty cool animation,and we got the image right here so I'm,also gonna show you a CSS tip on how to,generate a random picture from the web,and that's big that's why it's actually,loading because the image is originally,from the web so if I wanted to reload,the image again you can notice that the,image here it's a it's about the C and,also if I if I wanted to reload the,image or reload the page sorry but that,an other image will actually appear,that's because it's generating random,images from the web so without further,ado let's just dive right into the code,alright,okay so I'm here on my HTML got,everything set and the first thing that,I'm going to have to that I'm gonna have,to do is create a div and inside of this,div I'm gonna put the image that I told,you about the random image okay so I'm,just gonna call it image and right here,I'm gonna add the tag image and the,source is going to be this HT HT HTTP,and then double slash source dots on,splash splash comm and then slash and,then here you want to put the dimensions,of the of the image that you want so for,me it's just gonna be one hundred twenty,hundred twenty hundred two hundred and,two hundred and that's that's about it,so if we were to go here and refresh you,see uh it gave us a random image from,unsplash.com and that's that's basically,the reason why the the window is,actually loading is because the image is,actually from the web alright so I'm,gonna create another div and the div is,actually gonna be right under the the,body so I'm just gonna do div and class,is going to be a loader because this is,where we put the gif image that we want,while it's loading while it'll eat the,image that is loading so I'm just gonna,do image and then the source will be,dots gifts okay,so that's my own loader image you can,put yours and I'm also gonna leave my,own down below in the description if you,just in case you want to you want to use,it so this is the this is my own gif and,that's the image that should load,alright so actually we're actually done,with the HTML so let's go straight to,the CSS so I have got the margin and,padding set to zero and and then first,of all I'm going to target my my loader,okay so I'll go ahead and do dots loader,and I'll position it fixed I'll do,position fixed and then I'm gonna set,the top to zero zero and the left to,zero so that it's actually in the,top-left corner so if we were to refresh,the image is going to be under,the loader just like this and that's,actually what we want it's pretty cool,so now I'm going to actually give it a,background so background color is going,to be like light gray and let me take a,look

After seeing the first section, I believe you have a general understanding of Preloader

Continue the next second section about Preloader

Build a custom preloader - Webflow interactions & animations tutorial

before we get into making a preloader which is what we see here let's first,talk about the most important thing should you use a pre loading screen of,any type some people say yes others say never,the answer is it's up to you page loads can go pretty fast,your preloader might look ridiculous if it's only up for a quarter of a second,on the other hand maybe you've designed a page that takes several seconds before,it's presentable regardless if you want to set up a pre loader,here's a quick way to do it one we'll design our pre loader - we'll set our,initial state and three we'll make sure the preloader goes away,once the page is loaded number one we'll drag in a div block from the ad panel,and we'll drag it right into the page body mr. block will be the main,container for our pre loader so we'll create a class and name it free,loader let's make some adjustments first will enable flexbox and we'll justify,and align its children to the center second we'll adjust the positioning,setting the position to fixed we'll make sure to select full so it fills up the,whole viewport and we'll set the z-index to some obscenely high number this means,it'll appear on top of all other elements finally let's set a background,color we can choose a color from the color picker right here and of course we,can drag in anything anything can show up on page load if it's a huge gif for a,video or something it'll probably slow down the page load and serve as an,anatomy of the whole spirit of the pre loading thing so it's up to you we've,just dragged in a text block and we wrote loading and that's it that's the,basic design the bouncing ball the one from the beginning is taught in the full,guide on web player University so check out the link to that in the description,and feel free to skip over to that if you want to build it let's set our,initial state now the first thing we want to do after our design is done,we've simply put the word loading here for now is set the display in the style,panel here to none why because we want to be able to edit on the page without a,giant div block covering our work now notice the preloader div block is still,selected and we'll go over to interactions where we can add a trigger,we'll make sure the trigger is the page loading and we have two options here we,can set it when the page starts loading or we can set it when the page finishes,loading we'll want to go with the second option let's,create a new timed animation here and let's name it we're giving a name to,this animation and this is where we can set our initial state even though we set,the display to none in the style panel we can set our display back to flex,under hide show and we'll simply choose flex this makes it visible again and to,make it the initial state we just flick the switch that's it,part to complete and now for the final part the initial state controls what,everything looks like when the page first comes up we're going to make our,preloader disappear once the page finishe

After seeing the second section, I believe you have a general understanding of Preloader

Continue the next third section about Preloader

How to create a CSS Preloader Animation With Javascript Tutorial | Javascript Preloader Tutorial

hello there beautiful friends in this,video we're gonna do something really,cool we're gonna create a preloader,so we as humans we don't like to wait,for a long and why am I getting calls,philosophical let me let me just show,you what we're gonna make,so rather than so this would be the,website that we have so rather than,making it appear all of a sudden we are,gonna add this cool simple animation and,when the website loads fully up its,gonna fade out and look at that there is,our website very cool so let's get,started I provided the images that we're,gonna use in this video so make sure to,check out the description and i just,added everything in this image folder so,that's it that's all that you need so,let's create a index.html which we were,not gonna do in the image folder,index.html by the way I'm still sick so,I'm recovering but hopefully everything,is gonna be fine,in a few days so I'm gonna just create a,template HTML here I'm gonna name this,preloader since that's what we're gonna,do,perfect and now we just need a few,things so this is where like your whole,website would go right but before you do,that the first thing you want to do is,we're gonna create this preload class so,you want this to be the first thing,that's gonna render and then after this,you're gonna have your full website so,you have your sections you have your,headers header and footer and anything,else you want so this goes on top and in,this preload what we're gonna need is an,image of deplane so we're gonna head to,the image folder and we're gonna get the,airplane,let's also name this airplane perfect,and we're gonna need a let's add the h3,we're gonna save landing on the website,yeah I got really creative with this one,perfect and then we're gonna need the,three clouds now I only have one cloud,but that's the nice thing we can,duplicate it and create three now that,doesn't mean that it's gonna fetch the,file three times we can just take one,file and multiplicate it so it's not,gonna the loading is not gonna be so,horrible rather than like separately,loading three images so we're gonna do,image and we're gonna name this cloud,one now we need the source actually so,let's add image cloud and then we're,gonna add a class of cloud one the,sickness is getting to me alt we're,gonna name this cloud one and shift alt,and if we hold shift alt and then press,down on the arrow key we can,multiplicate this so let's also name,this cloud and this is gonna be cloud,two and cloud three wowie so one two,just rename this and the source will,remain the same we just want to use the,same image good all right so this is the,whole preload so below this you would,create your website so for this I just,added a section here and a h1 with,arrived and I just added an image so we,would have to wait a bit there we go and,that's basically it so let's also create,our style that CSS now and we need an,API so we need the CSS and ajs file I'm,gonna link these so let's do the CSS up,here,it's a link styles

After seeing the third section, I believe you have a general understanding of Preloader

Continue the next fourth section about Preloader

Haciendo un preloader con html css y javascript

bueno vamos en esta ocasión vamos a,crear un cargador de contenido un,loader básicamente que cargaría que nos,mostraría antes de cargar antes de,cargar nuestra página web en todo caso,vamos a empezar con nuestro,index.html vamos a crear primero el,cuerpo del spinner espn el que se va a,mover un sur es básicamente un circulito,que está ahí que nos hace referencia que,está cargando la página web entonces,vamos a estructurar nuestra página,nuestra página web con nuestro spinner,ya,probablemente y esto estuve bien mucho,es que mucha gente solamente hace el,cuerpo del spinner pero nunca lo hace,con javascript nunca le pone contenido,ya desde entonces en esta clase vamos a,poner el contenido ya escrito entonces,voy a crear un,un contenedor,que tenga una clase de pelo ader,la clase,vamos a ponerle una clase pre lo haré y,después de esto vamos a ponerle 4 veces,una clase spainair fast o spinner fast,básicamente mejor le ponemos spin área,un atajo muy conveniente a la hora de,usar visual studio code con html es,poner un punto que nos estaría señalando,nuestra clase y un spinner,y podemos multiplicarlo por las veces,que creamos con esto con el signo,pero en todo caso aquí,lo que tenemos que hacer es que este,contenido vaya dentro del contenido que,tenemos,así,en todo caso ya tenemos estructurado,nuestro archivo html,qué es lo que vamos a proceder a hacer,ahora,lo que vamos a proceder a hacer es crear,nuestro archivo,nuestros estilos vamos a,ya lo primero que tenemos que hacer es,crear un archivo de css,ya,un archivo de css vamos a limpiar vamos,a,limpiar nuestro archivo de html con todo,nuestro archivo de css ahora voy a poner,en pantalla para poder ver nuestro,contenido,en pantalla de,en el navegador cómo vamos a hacer esto,básicamente para,usar una herramienta llamada world gone,light servers que básicamente nos da nos,renderizar nuestro contenido en tiempo,real es básicamente un servidor que,interactúa,para,tener nuestro contenido en tiempo ya,aquí tenemos otro contenido en tiempo,real que es lo siguiente que vamos a,hacer ya tenemos ya,nosotros ya acabamos de,acabamos de limpiar nuestro contenido,html cuando en su contenido css entonces,nos falta darles tiros a nuestro,contenido css entonces nuestra primera,clase que tenemos a nuestro contenido,html en nuestra estructura básica html,es el problema de tenemos que darle un,los estilos a este va a ser toda esta,capa de aquí todo lo que se va a ver lo,vamos a cómo vamos a dar darle un with,the 100% un hate de 100% y ahora vamos a,darle un background que va a ser,negro que va a ser un brown negro,básicamente,una positiva una posición fija fai set,un led de 0,un top de 0,un zeta index por si acaso,para sobreponer nuestra imagen nuestro,spinner nuestro prueba y ya tenemos ya,porque hacemos esto este va a ser lo que,va a cubrir nuestro spinner y porque no,podemos hacer con el body el body es,nuestro texto que vamos a usar por,ejemplo que lo es una espina,puedes observar que nos está apareciendo,aquí,tal vez ib

After seeing the fourth section, I believe you have a general understanding of Preloader

Continue the next fifth section about Preloader

Preloader Plus Plugin - Free Screen Loader for Wordpress and Elementor

hey welcome back to web squadron have,you ever considered,hey welcome back have you ever wanted to,add some pre-loading to your website so,when someone visits they get like a bit,of animation now some people find a bit,gimmicky some really want to have it,because they've seen it used elsewhere,of course be careful on how you use,these because you don't want to affect,your page speed or affect your user,visitor experience but look if you go to,plugins in wordpress and you type in,preloader or to be specific,plea pre-pre-pre preloader plus you will,get this free plug-in and it is really,really good and simple to use now i'm,going to show you the settings for this,and how it looks once we've got it,enabled by the way i'm imran web,squadron i hope you like subscribe share,and follow and let everybody know about,how amazing these videos are to help you,in elementor wordpress or basically to,help you your clients and your websites,now once you've installed it,if you go down,to over here preloader plus what you're,going to get is loads loads of videos,which go through how do we use this how,do we do um icons you know how do we do,animated images they've got really good,content on here by the way so if,anything i show doesn't make sense,please watch these videos but if you,want to get straight into it,go to appearance and go to customize of,your theme which is a bit of a strange,way of doing it because normally this is,where you normally do your themes and,stuff like that what you do,is you will now notice i'm using hello,by the way hello and we have preloader,plus,present over there you can't miss it now,when you go in,you go to settings and this is where you,get to decide is are you going to allow,this to be enabled at all well yeah,that's why we're testing it and this is,going to be on the front page so you get,to decide is it on the front page or not,also is it only enabled on the first,visit so if someone's on your website,and they're moving around between pages,do you want the animation to keep coming,up you might want to say only on the,first visit,if they come back in again two weeks,later or tomorrow that will be a new,visit so that's okay there but if,they're moving around the site you,probably don't want that animation,continuously coming up because it could,get on their nerves,this is now where you decide on are you,gonna have a custom image a built-in,icon you might have some custom content,you might have a percentage counter you,might even have a progress bar i'm gonna,do all of them except the blog name and,what you can do is rearrange them so i,could have an image above an icon,i've got a progress bar up here i'm just,going to leave this like this for now so,image icon content counter and bar you,can actually see some of that happening,at the moment already,now here's where you get to decide on,your color scheme so i've gone with a,well let's just go for black let's go,for a bit more of a vibrant color hey,why not let's just go for,let's

After seeing the fifth section, I believe you have a general understanding of Preloader

Continue the next sixth section about Preloader

Update On 2022 Preloader Nation Events - New Jersey & Maryland Practice Session

what is going on,preloaders and vi preloaders,all right listen this is just going to,be something quick guys i wanted to uh,get something out to you and i didn't,want to well i don't have the time to,actually upload a video and you know all,that other good stuff but i just want to,get some information out to you guys,first hello,uh i miss you guys,well first and foremost let me tell you,guys,no i'm not like,uh,i'm not teasing you to the utmost and,i'm referring to the new bike,um there's been a lot going on,i'm gonna get that out to you i promise,you that,um,and now i'm getting ready to go to,arizona tomorrow,for those of you that don't know holly,davidson is,uh,uh,hey marv how you doing man,harley davidson flying me out to uh,arizona,to ride,um these new st models the street glide,and the road glide nick what's going on,keith mike nice to see you guys,hope to see you in arizona yeah i don't,know what's going on there,anonymous biker what's going on,um so i'm getting ready um packing and,stuff for that trip i'm only going to be,there for three days,thursday friday and leaving saturday,morning so really it's like two days,stefan what's going on thank you hello,beautiful that's my bride,um,greetings from belgium,ekram how you doing yeah so um,but i just want to get on here quickly,guys,and um let you know that i'm not teasing,you,just just been a lot going on this is,going to be a great year guys 2022 i got,a lot of stuff planned,um,so when i get back from dayto of daytona,when i get back from arizona,then i have to get all of that stuff,together,um,tom 202 what's going on,kevin what's up,keith,hopefully there will be video content,for your test rods of course they will,um there's no doubt about that,chassis how you doing how you doing good,afternoon,so once i get back from,arizona um,you're welcome john hello john from,pittsburgh,um then i have to,of course get that video out,but i don't want to,hmm i need to get that video out i did,some other videos i need to get done as,well guys when i tell you 2022 is busy,it's busy already and that's a good,thing it's a good kind of busy,so um,just to let you guys know,um i am going to get the uh video out,uh with the new bike,and um then i have to get the video for,whatever i do in arizona,right so and i was trying to pack light,on this trip guys it's just,it's so hard to do man it's so hard to,do so,uh it is what it is it's not like i'm,going to arizona every week or every,month i've never been there before so,i'm just going to bring what the hell i,want to bring and if i have to check a,bag i'll check a bag instead of me,trying to shove a bunch of stuff,into some bags the minimalistic thing is,hard for me to do,so and then after that we're doing,daytona guys,so daytona,i'm gonna be there from um,march 7th which is a monday,until march,um,9th let me just double check those dates,i'm pretty sure i'm right,the 7th to the 9th,yes which is a wednesday,now on march 7th which is a monday i'm,going to be doing a

After seeing the sixth section, I believe you have a general understanding of Preloader

Continue the next seventh section about Preloader

How To Add a Preloader Animation In WordPress For Free?

what's up guys here is Claude you're,from visual model WordPress themes and,in today's video You're Gonna Learn how,to apply a preloader animation into your,WordPress website for free,and for this guide we're going to be,using a free wordpress.org plugin called,Loft loader,this is from love to Ocean Developers,and has a simple and fast,animation to apply and use,this animation gonna be displayed while,people are loading your website,to install this plugin you can go to,Wordpress plugins add new type Loft,loader and install the very first plugin,that you're gonna appears into the,search results page,after installation click on activate,blue button so we can have the plugin,options,to work on your website,this animation can be very useful so the,user can see your page loading and,understand that your site is still,loading,without the normal wide screen while,waiting,go to settings love,Loft loader and the very first option is,enable Loft loader this is the default,loading animation,if you click in the very first option,you're gonna remove this,so the your WordPress website will not,have the preloader animation,after that you can go to display on,you can display this loading animation,across any page of your site,or,just in the,home page,after that you can set a,page not found template using this,plugin and,after that go to the backgrounds where,you can edit the color,the opacity of the color,if you set this opacity as a hundred,percent you're gonna have a solid color,without transparency,and of course you can change the colors,and animations after that we're going to,be moving to a very special part of the,plugin setup that is the loader here you,can for example upload your website,Brand's logo,let me show you one example,you can select the animation there's a,couple of animations so you can test I,really recommend that you check one by,one so you can find the best one for you,after that,let me upload,special visual Moto logo in a white,color,because I have chose a dark background,I do recommend PNG files,let me apply it,now a little square is running out over,the visualmodel.com website logo why of,the site is loading this is our,preloader animation,if someone goes to the home page,while the site loads,it gonna look this,now you can go to maximum load time,into the more section,and apply some extra options by the food,this is going to be set as zero so if,your site loads really fast you almost,will not see this loading animation but,if the site takes some time to load this,animation gonna keep running for two or,more seconds,you can apply a closed bottom in the,case that the site really takes too much,time to Loop uh bottom will appear so,you can remove this loading,and the advanced Tab and it is I hope,you guys enjoyed this video feel free to,use the comment section Below in the,case that you have any question and,don't forget to check out the,visualmodel.com portfolio of amazing,WordPress themes and I'll see you later,all the best

After seeing the seventh section, I believe you have a general understanding of Preloader

Continue the next eighth section about Preloader

Add Smooth Preloader & Page Transitions Animation in Elementor on WordPress

hi and welcome to this tutorial where,i'm going to show you how to use the,preloader widget,with the plus add-ons for elementor with,this pre-loader you'll be able to,display eye-catching screen loaders,and loading animations while your web,page is loading in the background and,this serves an,important purpose of keeping visitors,engaged while your page loads,i'm dave and i'm bringing you this guest,tutorial on behalf of the plus add-ons,for elementor,and make sure to subscribe to the,channel so that way you won't miss,a single update,okay so the first thing we want to make,sure is that our widget is activated,and for this we go to the plus settings,plus widget,in the search box type in pre-loader,next to our pre-loader item here is a,toggle switch,make sure this one is enabled click save,and then next we're going to go into,extra options,scroll down the page until you find this,section here the preloader section,so all those three different items here,are related to the pre-loader,and as you can see by default it is,disabled but,if it is disabled you can still enable,it just for specific pages or post,all you have to do basically is to type,in the id so the id is usually a number,followed by a comma if you want to add,more than one,or if you prefer to have the pre-loader,enabled throughout the old website,just simply enable it here and then you,can decide whether or not you want to,load the lottie javascript in pre-order,and if you want to,just enable it and then don't forget to,save,and one more step now we're going to,performance we're going to clear the,cache,so click on purge all cache click ok,and that's it all done already and now,that our widgets are activated,we can now insert them in an elementor,page,so let's create a new section,just like that and now we can insert our,preloader,so where is it located if you scroll,down all the elements here you'll find,all our plus essentials add-ons so this,is our preloader here,or you can just type in in the search,box pre-loader,and this is our pre-order widget again,and to insert it,simply drag and drop it and now for our,pre-order to work,we need some content on our page so,let's add some,and now back to our pre-loader widget as,you can see the content,is set by default to image but we can,also select,icon text content predefined lottie,custom code shortcode and progress,so let's discover each of these elements,but first let me show you this feature,here backend visibility so if you enable,this it will allow you to have a preview,of what this pre-order looks like now as,the message says here it will show a,static pre-order area,just for design purposes so it's not the,actual one but it will give you a fair,idea,of what it looks like okay so let's,discover our first content type which is,image,and let's add an image as always you can,select from the media library or upload,a file,so maybe you want to use your logo as,your pre-loader so let's select a logo,here,and let's insert this media and if w

After seeing the eighth section, I believe you have a general understanding of Preloader

Continue the next ninth section about Preloader

[NEW] Elementor Preloader Tutorial: Make an Awesome Website Preloader in Elementor Pro v3.6

elementor just released the elementor,pro version 3.6 and there is an,interesting feature that enables you to,set up a preloader for your elementor,website note that this is only available,for the element of pro users in the,preloader you are able to set up,different kind of pre-loaders for your,elemental website like an animation or,using an icon or even an image including,gif animations you can set up a speed,for your preloader,the delay for your preloader and a color,for your preloader including the size of,your loader can be big,can be smaller,whatever you want you can as well set up,the background color of your page once,it's loading in this case it's a black,color but it's a little bit transparent,so let's jump straight into the video,and i'll show you different ways you can,use these preloaders in your elemental,website,back into our elementor dashboard we are,going to go straight to the elementor,menu option in wordpress and we go to,settings,go to experiments and scroll down below,here to enable the page transitions make,sure that it is set to active,then save changes,now we'll open up any of our pages with,elementor,i'll come to pages,i'll open up my about page and edit with,elementor,come to the hamburger icon at the top,and click on the site settings you,should note that the page transitions,and the preloader are a site-wide,settings for elementor for now that,means that you cannot set up this,pre-loader for only a single page or a,section in your elementor website now,that we are inside our site settings and,the page transitions this is where we,can enable our preloader but before we,enable a preloader we can set up a,background color for our pre-loader,we'll come back later to this option,let's go inside our preloader,and for now it is set to none,however when i set to animation,then i'm given options to choose from,for example an animation that has,bouncing dots an animation that has,pulsing dots a pulse an overlap spinners,and a lot more let me first update for,now and you look at how the bouncing,dots animation would look like in your,elemental website,now when i click on the about page you,realize those bouncing dots,appearing so we can further customize on,how the animation can be and the color,of the dots,back inside our site settings we're,going to first of all decrease on the,speed of the animation i'll make it,1150,we're not going to delay our preloader,and we're going to change the color of,our bouncing dots to white,we can as well increase the size of our,bouncing dots to about 100. i'll come,back to my homepage,and voila,now you see that our dots have changed,the color and the size of our dots has,increased,under the animation i'm going to change,the animation for our dots to let me say,message spinners,i'll update,now we have nested spinners as our,preloader for our elementor page if we,increase on the speed of our animation,for our nested spinners,and i update,i come to our about page you see that,now our nested spinne

Congratulation! You bave finally finished reading Preloader and believe you bave enougb understending Preloader

Come on and read the rest of the article!

I am a shopify merchant, I am opening several shopify stores. I use ppspy to find Shopify stores and track competitor stores. PPSPY really helped me a lot, I also subscribe to PPSPY's service, I hope more people can like PPSPY！ — Ecomvy