برنامه نویسی

30 انیمیشن بارگیری رایگان CSS برای وب سایت شما در سال 2023

ek3nk4r 2023-04-16

0 93 خواندن این مطلب 3 دقیقه زمان میبرد

30 انیمیشن بارگیری رایگان CSS برای وب سایت شما در سال 2023

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

فهرست مطالب

ما از فایل های Lottie استفاده خواهیم کرد

فایل‌های Lottie کوچک‌ترین، رایگان و آماده‌ترین موشن گرافیک‌ها را برای وب، برنامه، شبکه‌های اجتماعی و طرح‌ها به ارمغان می‌آورند. انیمیشن های Lottie را در کوتاه ترین زمان ایجاد، ویرایش، آزمایش، همکاری و ارسال کنید!

مراحل

1. این اسکریپت را در html خود اضافه کنید


<script 
   src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js">
</script>

2. ما یک پیوند فایل JSON ارائه می دهیم که باید در ویژگی src قرار گیرد

<lottie-player 
 src="Place json file link" 
 background="transparent"  
 speed="1"  
 style="width: 300px; height: 300px;"  
 loop  
 autoplay>
</lottie-player>

اگر نمی خواهید از Lottie Files استفاده کنید، این Gif را دانلود کنید

1. هواپیمای کاغذی

هواپیمای کاغذی

فایل Json

https://assets4.lottiefiles.com/packages/lf20_x62chJ.json

2. بارگذاری موج مواد

بارگذاری موج مواد

فایل Json

https://assets8.lottiefiles.com/datafiles/nT4vnUFY9yay7QI/data.json

3. بارگذاری انیمیشن آبی

در حال بارگیری انیمیشن آبی

فایل Json

https://assets6.lottiefiles.com/packages/lf20_usmfx6bp.json

4. بارگذاری

بارگذاری

فایل Json

https://assets8.lottiefiles.com/datafiles/qm9uaAEoe13l3eQ/data.json

5. بارگیری مسیر

بارگیری مسیر

فایل Json

https://assets8.lottiefiles.com/datafiles/bNwYPnjv3OdFA5w/data.json

6. ServisHero در حال بارگذاری

ServisHero در حال بارگذاری

فایل Json

https://assets8.lottiefiles.com/datafiles/Hc0DflKIkYg1j3u/data.json

7. بارگذاری بی نهایت

بارگذاری بی نهایت

فایل Json

https://assets1.lottiefiles.com/datafiles/LZyeA614QaESwNk/data.json

8. بارگذاری درخشندگی

بارگیری درخشش

فایل Json

https://assets2.lottiefiles.com/datafiles/WKqC5QWz9GiZnlm/data.json

9. بارگذاری

بارگذاری

فایل Json

https://assets2.lottiefiles.com/datafiles/ORpUnaV6z0mJ17E/data.json

10. بارگذاری

بارگذاری

فایل Json

https://assets7.lottiefiles.com/datafiles/XpFCWApEzLI29va/data.json

از ما حمایت کنید

ویدیوی شگفت انگیزی که در این پست قرار داده ایم را از دست ندهید! روی دکمه پخش کلیک کنید تا الهام بگیرید

https://www.youtube.com/watch?v=49s7aLqh-nk

11. جعبه بارگذاری

در حال بارگذاری جعبه

فایل Json

https://assets2.lottiefiles.com/packages/lf20_a2chheio.json

12. Flip Box Loading

Flip Box Loading

فایل Json

https://assets2.lottiefiles.com/packages/lf20_Z4BhGL.json

13. بارگذاری مثلث

بارگذاری مثلثی

فایل Json

https://assets2.lottiefiles.com/datafiles/DlRM2jtACyr4IX1u6l5rqtW1QWZKLCkNoBIXWeyH/loading.json

14. بارگذاری ضربه انگشت

ضربه انگشت در حال بارگیری

فایل Json

https://assets2.lottiefiles.com/packages/lf20_szlepvdh.json

15. بارگذاری ساده

بارگذاری ساده

فایل Json

https://assets2.lottiefiles.com/datafiles/tvGrhGYaLS0VjreZ1oqQpeFYPn4xPO625FsUAsp8/simple loading/simple.json

16. بارگیری کتاب

در حال بارگذاری کتاب

فایل Json

https://assets2.lottiefiles.com/datafiles/kdNSsX7MXeXXT1u/data.json

17. چرخ دنده های بارگیری

در حال بارگیری چرخ دنده ها

فایل Json

https://assets2.lottiefiles.com/datafiles/jQOi6i5dHOY4uP3/data.json

18. Loading Success Spinner

در حال بارگیری موفقیت آمیز چرخنده

فایل Json

https://assets2.lottiefiles.com/packages/lf20_knpXLX.json

19. بارگذاری انیمیشن

در حال بارگذاری انیمیشن

فایل Json

https://assets2.lottiefiles.com/datafiles/kaSuzs8QVBUsk3j/data.json

20. بارگذاری کتاب

بارگذاری کتاب

فایل Json

https://assets5.lottiefiles.com/packages/lf20_DMgKk1.json

کد نویسی نسخه ی نمایشی

کد نویسی نسخه ی نمایشی مجموعه ای رایگان از نمونه کدهای انیمیشن HTML و CSS را ارائه می دهد.

democoding.netlify.app/blog/login-pag…

18:40 بعد از ظهر – 01 آوریل 2023

21. الگوی بارگذاری

الگوی بارگذاری

فایل Json

https://assets3.lottiefiles.com/packages/lf20_TEPYi7OqQu.json

22. بارگذاری

بارگذاری

فایل Json

https://assets2.lottiefiles.com/packages/lf20_pMMQPe.json

23. بارگیری مایع امین عدالتی پور

بارگیری مایع امین عدالتی پور

فایل Json

https://assets2.lottiefiles.com/packages/lf20_qg4cSS.json

24. انیمیشن بارگذاری سیال

انیمیشن بارگذاری مایعات

فایل Json

https://assets2.lottiefiles.com/datafiles/iTvqbURmiPR4l5L/data.json

25. بارگذاری

بارگذاری

فایل Json

https://assets2.lottiefiles.com/temp/lf20_jIG9zu.json

26. Loading Bloob

در حال بارگذاری Bloob

فایل Json

https://assets2.lottiefiles.com/packages/lf20_rPGSco.json

27. بارگذاری

بارگذاری

فایل Json

https://assets2.lottiefiles.com/datafiles/kn5W819UTw4eDwEBTOscVxDtsBaRzRSLnlqWen3o/Loading/data.json

28. بارگیری HMS

بارگیری HMS

فایل Json

https://assets2.lottiefiles.com/packages/lf20_t9gkkhz4.json

29. StreetBy Loading

StreetBy Loading

فایل Json

https://assets2.lottiefiles.com/datafiles/afw92jL6nC0SZCb/data.json

30. چرخش سه بعدی در حال بارگذاری انیمیشن

چرخش سه بعدی در حال بارگذاری انیمیشن

فایل Json

https://assets2.lottiefiles.com/datafiles/wFjFleaESNWBzrV/data.json

بهترین پست

نحوه ایجاد دکمه اسکرول به بالا در React
جلوه های شناور منوی شبکه های اجتماعی ایزومتریک سه بعدی CSS
لرزش جعبه ورودی در ورودی نامعتبر

برای اطلاعات بیشتر

مشترک کانال یوتیوب من شوید
https://www.youtube.com/@democode
اگر به کار آزاد نیاز دارید، نمایه Fiver من را بررسی کنید
https://www.fiverr.com/amit_sharma77
من را در اینستاگرام دنبال کنید
https://www.instagram.com/fromgoodthings/
صفحه فیس بوک من را بررسی کنید
برنامه نویسی میم ها توسط Coder
درخت پیوند
https://linktr.ee/jonSnow77