Advertisement
Patrikrizek

lesson-8-loader

Nov 24th, 2022
690
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.49 KB | None | 0 0
  1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Loader Animation</title>
  9.     <style>
  10.         body {
  11.             background-color: rgb(48, 48, 48);
  12.         }
  13.  
  14.         .wrapper {
  15.             position: absolute;
  16.             top: 50%;
  17.             right: 50%;
  18.         }
  19.  
  20.         .loader {
  21.             display: inline-block;
  22.             width: 250px;
  23.             height: 20px;
  24.             border-radius: 40px;
  25.             background-color: rgba(255, 255, 255, 1);
  26.             position: relative;
  27.             overflow: hidden;
  28.         }
  29.  
  30.         .loader::before {
  31.             content: "";
  32.             position: absolute;
  33.             top: 0;
  34.             left: -50px;
  35.             width: 150%;
  36.             height: 100%;
  37.             background-image: linear-gradient(332deg, #6b70ff, #f8adff);
  38.             border-radius: inherit;
  39.             transform: scaleX(0);
  40.             transform-origin: left;
  41.             animation: scale 1.2s linear infinite;
  42.         }
  43.  
  44.         @keyframes scale {
  45.             50% {
  46.                 transform: scaleX(1);
  47.             }            
  48.             100% {
  49.                 transform:  scaleX(0);
  50.                 transform-origin: right;
  51.             }
  52.         }
  53.     </style>
  54. </head>
  55. <body>
  56.     <div class="wrapper">
  57.         <span class="loader"></span>
  58.     </div>
  59. </body>
  60. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement