Creation Code

  Page Loader Using CSS: In this post, we will create a spinner loading effect using CSS. A loader can create an excellent user experience in your app or website. This loader animation will be a horizontal effect and you can use it before loading your page. Explanation: 1. First, create an HTML file and make a span section with class loader < span class =" loader "></ span > 2. Now give the loader class a suitable height and width with some adjustment . loader {     margin: 600 px ;     width: 100 px ;     height: 100 px ;     position: relative ; } 3. Create the before and after effect  . loader :: before , . loader :: after {     content: '';     position: absolute ;     width: inherit ;     height: inherit ;     border-radius: 50 % ;     mix-blend-mode: multiply ;     animation: rotate 1 s infinite     cubic-bezier ( 0.77 , 0 , 0.175 , 1 ); } 4. Give it your favourite colour . loader :: before {     background-color: #fc3f9e; } . loader :: after