Animation Loader Bar Effect | CSS tutorial code

Wojciech K. października 19, 2022

CSS3

<style>
  {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
   display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: black;
    
}
.loader
{
    position: relative;
    width: 600px;
    height: 25px;
    background: #fff;
    -webkit-box-reflect:below 1px linear-gradient(transparent,#0005)
    
}
.loader::before
{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,#fb0094,#0000ff,#00ff00,#ffff00,
    #fb0094,#0000ff,#00ff00,#ffff00,#fb0094);
    animation: animate 20s linear infinite;
    background-size: 500%;
}
.loader::after
{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,#fb0094,#0000ff,#00ff00,#ffff00,
    #fb0094,#0000ff,#00ff00,#ffff00,#fb0094);
    animation: animate 20s linear infinite;
    background-size: 500%;
    filter: blur(20px);
}
@keyframes animate
{
  0%  
    {
background-position: 0 0;

}
0%  
{
background-position: 500% 0;

}
}
</style>

HTML 5

Prześlij komentarz

0 Komentarze