Angular 12 CRUD Example
In this article, we will learn angular 12 CRUD example with web API as well as way to implement cascading dropdown, searching, sorting, and pagination...
May 30, 2021 read moreIn this article, we will learn angular 12 CRUD example with web API as well as way to implement cascading dropdown, searching, sorting, and pagination...
May 30, 2021 read moreIn this article i am going to explain how you can use angular js table with bootstrap 4 in asp.net web form, and also show you how you can display records...
December 08, 2018 read moreCodingvila also allowing a guest post for digital marketing, where you can explore your business, product, or services in terms of articles. write quality.......
August, 21, 2021 read moreIn this article, we will learn how to create a bar chart in angular 12 using ng2-charts. Here, I'll explain how to create an angular 12 project in visual........
May 29, 2021 read moreThis article gives an explanation about convert Datatable to CSV in c# and explains the efficient way to write CSV files from Datatable as well as show...
March 01, 2020 read moreThis article provides an explanation about how to merge multiple pdf files into single pdf in using Itextsharp in c# here I also explained the use of Itextsharp.
January 22, 2019 read more<!DOCTYPE html> <html> <head> <title>Animated Page Loader Using CSS | Codingvila</title> </head> <body> </body> </html>
<style> .socket { width: 200px; height: 200px; position: absolute; left: 50%; margin-left: -100px; top: 50%; margin-top: -100px; } .hex-brick { background: #223c88; width: 30px; height: 17px; position: absolute; top: 5px; animation-name: fade; animation-duration: 2s; animation-iteration-count: infinite; -webkit-animation-name: fade; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; } .h2 { transform: rotate(60deg); -webkit-transform: rotate(60deg); } .h3 { transform: rotate(-60deg); -webkit-transform: rotate(-60deg); } .gel { height: 30px; width: 30px; transition: all .3s; -webkit-transition: all .3s; position: absolute; top: 50%; left: 50%; } .center-gel { margin-left: -15px; margin-top: -15px; animation-name: pulse; animation-duration: 2s; animation-iteration-count: infinite; -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; } .c1 { margin-left: -47px; margin-top: -15px; } .c2 { margin-left: -31px; margin-top: -43px; } .c3 { margin-left: 1px; margin-top: -43px; } .c4 { margin-left: 17px; margin-top: -15px; } .c5 { margin-left: -31px; margin-top: 13px; } .c6 { margin-left: 1px; margin-top: 13px; } .c7 { margin-left: -63px; margin-top: -43px; } .c8 { margin-left: 33px; margin-top: -43px; } .c9 { margin-left: -15px; margin-top: 41px; } .c10 { margin-left: -63px; margin-top: 13px; } .c11 { margin-left: 33px; margin-top: 13px; } .c12 { margin-left: -15px; margin-top: -71px; } .c13 { margin-left: -47px; margin-top: -71px; } .c14 { margin-left: 17px; margin-top: -71px; } .c15 { margin-left: -47px; margin-top: 41px; } .c16 { margin-left: 17px; margin-top: 41px; } .c17 { margin-left: -79px; margin-top: -15px; } .c18 { margin-left: 49px; margin-top: -15px; } .c19 { margin-left: -63px; margin-top: -99px; } .c20 { margin-left: 33px; margin-top: -99px; } .c21 { margin-left: 1px; margin-top: -99px; } .c22 { margin-left: -31px; margin-top: -99px; } .c23 { margin-left: -63px; margin-top: 69px; } .c24 { margin-left: 33px; margin-top: 69px; } .c25 { margin-left: 1px; margin-top: 69px; } .c26 { margin-left: -31px; margin-top: 69px; } .c27 { margin-left: -79px; margin-top: -15px; } .c28 { margin-left: -95px; margin-top: -43px; } .c29 { margin-left: -95px; margin-top: 13px; } .c30 { margin-left: 49px; margin-top: 41px; } .c31 { margin-left: -79px; margin-top: -71px; } .c32 { margin-left: -111px; margin-top: -15px; } .c33 { margin-left: 65px; margin-top: -43px; } .c34 { margin-left: 65px; margin-top: 13px; } .c35 { margin-left: -79px; margin-top: 41px; } .c36 { margin-left: 49px; margin-top: -71px; } .c37 { margin-left: 81px; margin-top: -15px; } .r1 { animation-name: pulse; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: .2s; -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .2s; } .r2 { animation-name: pulse; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: .4s; -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .4s; } .r3 { animation-name: pulse; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: .6s; -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .6s; } .r1 > .hex-brick { animation-name: fade; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: .2s; -webkit-animation-name: fade; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .2s; } .r2 > .hex-brick { animation-name: fade; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: .4s; -webkit-animation-name: fade; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .4s; } .r3 > .hex-brick { animation-name: fade; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: .6s; -webkit-animation-name: fade; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .6s; } @keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.01); transform: scale(0.01); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes fade { 0% { background: #ff0097; } 50% { background: #223c88; } 100% { background: #ff0097; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.01); transform: scale(0.01); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes fade { 0% { background: #223c88; } 50% { background: #ff0097; } 100% { background: #223c88; } } </style>
<body> <div class="socket"> <div class="gel center-gel"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c1 r1"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c2 r1"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c3 r1"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c4 r1"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c5 r1"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c6 r1"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c7 r2"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c8 r2"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c9 r2"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c10 r2"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c11 r2"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c12 r2"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c13 r2"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c14 r2"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c15 r2"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c16 r2"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c17 r2"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c18 r2"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c19 r3"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c20 r3"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c21 r3"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c22 r3"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c23 r3"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c24 r3"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c25 r3"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c26 r3"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c28 r3"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c29 r3"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c30 r3"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c31 r3"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c32 r3"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c33 r3"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c34 r3"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c35 r3"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c36 r3"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> <div class="gel c37 r3"> <div class="hex-brick h1"></div> <div class="hex-brick h2"></div> <div class="hex-brick h3"></div> </div> </div> </body>
Codingvila provides articles and blogs on web and software development for beginners as well as free Academic projects for final year students in Asp.Net, MVC, C#, Vb.Net, SQL Server, Angular Js, Android, PHP, Java, Python, Desktop Software Application and etc.
Thank you for your valuable time, to read this article, If you like this article, please share this article and post your valuable comments.
Once, you post your comment, we will review your posted comment and publish it. It may take a time around 24 business working hours.
Sometimes I not able to give detailed level explanation for your questions or comments, if you want detailed explanation, your can mansion your contact email id along with your question or you can do select given checkbox "Notify me" the time of write comment. So we can drop mail to you.
If you have any questions regarding this article/blog you can contact us on info.codingvila@gmail.com
Tutup Konverter!sentiment_satisfied Emoticon