Загрузчик Glowing Cube с использованием HTML и CSS

Опубликовано: 26 Февраля, 2022

Загрузчик светящегося куба может быть создан с использованием HTML и CSS. Мы будем использовать HTML для создания структуры и некоторых свойств CSS.

Загрузчик - это часть операционной системы, которая отвечает за загрузку программ и библиотек. Это один из важных этапов в процессе запуска программы, поскольку он помещает программы в память и подготавливает их к выполнению. Итак, мы создадим круговой загрузчик, используя свойства HTML и CSS.

HTML Code: In this section, we will design the basic structure of the code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Glowing cube loading</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
   <h1>Loading GeeksforGeeks...</h1>
   <div class="loading"> 
        <span></span>
   </div>
  
</body>
</html>

CSS Code: In this section, we will use some CSS property to design a Glowing Cube. We’ll use @keyframes which specifies animation code.The animation is created by gradually changing from one set of CSS styles to another. The style change will happen in percent or with the keywords “from” and “to”, which is the same as 0% and 100%. We can change the set of CSS styles many times.
The syntax for @keyframes is: @keyframes animationname {keyframes-selector {css-styles;}}

body{
    background: black;
}
h1{ 
    margin-top: 300px;
    text-align: center;
    color: darkgreen;
}
  
.loading{
      
    width: 50px;
    height: 50px;
    margin: 100px auto;
    position: relative;
}
  
.loading span{
    display: block;
    position: absolute;
    bottom: 0;
    background: yellowgreen;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    animation: loading 1.5s infinite ease-in-out;
}
  
@keyframes loading{
    0%{ 
        transform: rotate(0deg);
        background: yellow;
        box-shadow: 0 0 10px black, 
                    0 0 10px 5px green;
    }
    25%{
        transform: rotate(80deg);
        box-shadow: 0 0 10px #9966ff,
                    0 0 10px 5px black, 
                    0 0 10px 5px yellow;
    }
    100%{
        transform: rotate(0deg);
    }
}

Complete Code: It is the combination of above two code section, the CSS code is added internally in the HTML code by using style tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Glowing cube loading</title>
    <style>
body{
    background: black;
}
h1{ 
    margin-top: 300px;
    text-align: center;
    color: darkgreen;
}
  
.loading{
      
    width: 50px;
    height: 50px;
    margin: 100px auto;
    position: relative;
}
  
.loading span{
    display: block;
    position: absolute;
    bottom: 0;
    background: yellowgreen;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    animation: loading 1.5s infinite ease-in-out;
}
  
@keyframes loading{
    0%{ 
        transform: rotate(0deg);
        background: yellow;
        box-shadow: 0 0 10px black,
                    0 0 10px 5px green;
    }
    25%{
        transform: rotate(80deg);
        box-shadow: 0 0 10px #9966ff,
                    0 0 10px 5px black,
                    0 0 10px 5px yellow;
    }
    100%{
        transform: rotate(0deg);
    }
}
     </style>
</head>
<body>
    
   <h1>Loading GeeksforGeeks...</h1>
   <div class="loading"> 
        <span></span>
   </div>
  
</body>
</html>

Выход:

HTML HTML-Misc CSS

Загрузчик Glowing Cube с использованием HTML и CSS

РЕКОМЕНДУЕМЫЕ СТАТЬИ