To implement a CSS skeleton for the provided HTML template, you can modify the code as follows:<\/p>\r\n
1. In your component's CSS file (your-component.component.css), or globally define the styles for the skeleton:<\/p>\r\n
.skeleton {\r\n width: 100%;\r\n height: 20px;\r\n background-color: #e0e0e0;\r\n animation: skeleton-animation 1.5s infinite;\r\n background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));\r\n background-size: 40px 100%;\r\n background-repeat: no-repeat;\r\n }\r\n\r\n@-webkit-keyframes skeleton-animation {\r\nto {\r\n background-position: right -40px top 0;\r\n }\r\n}\r\n@keyframes skeleton-animation {\r\n to {\r\n background-position: right -40px top 0;\r\n }\r\n}<\/code><\/pre>\r\n2. Modify your HTML template (your-component.component.html) to include the skeleton CSS classes and conditionally render the skeleton. suppose data is in coupon variable <\/p>\r\n
<div class=\"row gy-6\">\r\n <h3 class=\"\">Coupon Codes<\/h3>\r\n \r\n <div class=\"col-md-6 col-lg-4\" *ngFor=\"let coupon of coupons\">\r\n <a href=\"#\" class=\"card shadow-lg border h-100\">\r\n <div class=\"card-body p-5 d-flex flex-row\">\r\n <div>\r\n <img class=\"w-15\" src=\"assets\/icons\/{{coupon?.Logo || 'assets\/icons\/placeholder.png'}}\" alt=\"\">\r\n <span class=\"badge bg-violet rounded py-1 mb-2\">Up to 50% Off<\/span>\r\n <h4 class=\"mb-1\">Title of the Product with details and more...<\/h4>\r\n <p class=\"mb-0 text-body btn btn-outline-gradient gradient-5 btn-sm\"><span >SAVE $50<\/span><\/p>\r\n <button class=\"btn btn-sm float-end btn-red btn-icon rounded px-3\"><i class=\"uil uil-heart\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n<\/div>\r\n<!--\/.row -->\r\n\r\n<!--row -->\r\n<div class=\"row\" *ngIf=\"!coupons\">\r\n <!-- Skeleton HTML structure -->\r\n <div class=\"col-md-6 col-lg-4\" *ngFor=\"let item of [1,2,3]\">\r\n <a href=\"#\" class=\"card shadow-lg border h-100\">\r\n <div class=\"card-body p-5 d-flex flex-row\">\r\n <div>\r\n <div class=\"skeleton w-15\"> <\/div>\r\n <div class=\"skeleton badge bg-violet rounded py-1 mb-2\"> <\/div>\r\n <div class=\"skeleton mb-1\"> <\/div>\r\n <div class=\"skeleton mb-0 text-body btn btn-outline-gradient gradient-5 btn-sm\"> <\/div>\r\n <div class=\"skeleton btn btn-sm float-end btn-red btn-icon rounded px-3\"> <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n<\/div>\r\n<!--\/.row --><\/code><\/pre>\r\nIn the above code, the skeleton elements have the skeleton class applied to them, which will apply the CSS styles defined earlier. The skeleton structure is rendered when there are no coupons available.<\/p>\r\n
Additionally, the *ngIf directive<\/strong> is used to conditionally display the skeleton structure (*ngIf=\"!coupons\")<\/strong> when the coupons data is not present.<\/p>","category_id":"13","is_private":"0","created_at":"2023-05-16T23:27:20.000000Z","updated_at":"2023-05-16T23:27:20.000000Z","category":{"id":13,"user_id":"1","name":"Angular","slug":"angular-rfjp","parent_id":"12","created_at":"2023-03-24T03:25:15.000000Z","updated_at":"2023-03-24T03:25:15.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"To implement a CSS skeleton for the provided HTML template, you can modify the code as follows: 1. In your component's CSS file (your-compon - skeleton loader css in angular (Updated: May 16, 2023) - Read more about skeleton loader css in angular at my programming site [SITE]","categories":[]}