Homeanimation loader YouTube Skeleton Loading Using HTML and CSS | YouTube Loader | bySagar Developer -May 31, 2021 0 Hello Readers, welcome to my other blog, today in this blog I'm going to create a YouTube skeleton loading using HTML & CSS .Video Tutorial Of YouTube Skeleton Loading Using HTML and CSS:In the video, you have seen the demo of this project and I hope you love it.Source Code: index.html YouTube Skeleton Loading - Sagar Developer style.css * { padding: 0; margin: 0; box-sizing: border-box; } .nav-bar { display: inline-block; height: 60px; width: 100%; top: 10px; margin-bottom: 2px; padding: 20px 30px; } img { width: 120px; margin-top: -44px; margin-left: 43px; } h3 { float: right; height: 45px; width: 46px; margin-top: -29px; margin-left: 9px; display: inline-block; text-align: center; justify-content: center; } h3 i { margin-top: 10px; } .container { width: 100%; text-align: center; justify-content: center; } .card { height: 310px; width: 442px; background-color: #fdfbfb; transform: translate(1%, 9%); top: 20%; padding: 20px 30px; display: inline-block; flex-direction: column; } .thumbnail { position: relative; float: left; height: 16%; width: 12%; border-radius: 50%; } h2 { width: 379px; height: 200px; justify-content: center; text-align: center; margin-bottom: 15px; } h1 { width: 69%; height: 20px; float: right; margin-right: 55px; } p { width: 59%; height: 19px; margin-left: 63px; margin-top: 50px; } .card * { background: linear-gradient( 120deg, #e5e5e5 30%, #f2f2f2 38%, #f2f2f2 40%, #e5e5e5 48%); background-size: 200% 100%; background-position: 100% 0; animation: load 2s infinite; } @keyframes load { 100% { background-position: -100% 0; } }
Post a Comment