Серый кружочек:
Код:
<style>
.loader_container {
animation: loaderRotate .6s infinite linear;
}
@keyframes loaderRotate {
100% {
transform: rotate(360deg);
}
}
</style>
<svg class="loader_container" width="26" height="26">
<path d="M 13 1 A 12 12 0 0 1 21.485 4.515" stroke="black" stroke-width="2" fill="transparent" style="opacity: 0.7"/>
<path d="M 21.485 4.515 A 12 12 0 0 1 25 13" stroke="black" stroke-width="2" fill="transparent" style="opacity: 0.8"/>
<path d="M 25 13 A 12 12 0 0 1 21.485 21.485" stroke="black" stroke-width="2" fill="transparent" style="opacity: 0.1"/>
<path d="M 21.485 21.485 A 12 12 0 0 1 13 25" stroke="black" stroke-width="2" fill="transparent" style="opacity: 0.2"/>
<path d="M 13 25 A 12 12 0 0 1 4.515 21.485" stroke="black" stroke-width="2" fill="transparent" style="opacity: 0.3"/>
<path d="M 4.515 21.485 A 12 12 0 0 1 1 13" stroke="black" stroke-width="2" fill="transparent" style="opacity: 0.4"/>
<path d="M 1 13 A 12 12 0 0 1 4.515 4.515" stroke="black" stroke-width="2" fill="transparent" style="opacity: 0.5"/>
<path d="M 4.515 4.515 A 12 12 0 0 1 13 1" stroke="black" stroke-width="2" fill="transparent" style="opacity: 0.6"/>
</svg>
Лого ELMA - как при загрузке страницы:
Код:
<div id="wrap"></div>
<style>
#wrap {
display: flex;
flex-wrap: wrap;
width: 30px;
height: 30px;
position: absolute;
left: 200px;
}
#wrap > img {
flex: 1 0 50%;
width: 15px;
height: 15px;
animation: elm 2s linear infinite;
}
#wrap img:nth-child(1) {
animation-delay: 500ms;
}
#wrap img:nth-child(2) {
animation-delay: 1000ms;
}
#wrap img:nth-child(4) {
animation-delay: 1500ms;
}
#wrap img:nth-child(3) {
animation-delay: 2000ms;
}
@keyframes elm {
0% {
opacity: 100%;
transform: scale(.8)
}
100% {
opacity: 0;
transform: scale(1)
}
}
</style>
<script>
function setDataset() {
setTimeout(() => {
const red = document.createElement("img")
red.src = "<%= UI.widget.filePath %>/Vector.svg"
red.classList.add("red")
const yellow = document.createElement("img")
yellow.src = "<%= UI.widget.filePath %>/Vector (1).svg"
yellow.classList.add("yellow")
const blue = document.createElement("img")
blue.src = "<%= UI.widget.filePath %>/Vector (2).svg"
blue.classList.add("blue")
const sky = document.createElement("img")
sky.src = "<%= UI.widget.filePath %>/Vector (3).svg"
sky.classList.add("sky")
const wrap = document.getElementById("wrap")
wrap.appendChild(red)
wrap.appendChild(yellow)
wrap.appendChild(blue)
wrap.appendChild(sky)
}, 1000)
}
setDataset()
</script>
где (Vector (1).svg - это разбитый лого: открываем figma, загружаем с сайта дизайна Элмы лого в svg, экспортируем каждый кусок отдельно. Загружаем их в Файлы на Форме)
Просто крутящийся лого:
Код:
<style>
.loader {
position: absolute;
left: 100px;
width: 30px;
height: 30px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<script>
function setDataset() {
setTimeout(() => {
const element = document.querySelector(".hove") // установленный класс в свойствах атрибута
const image = document.createElement("img")
image.src = "https://cms.elma365.com/assets/5b2b4537-c0bf-476e-918b-ac94fd0da119?download";
image.classList.add("loader")
element.parentNode.insertBefore(image, element.nextSibling)
}, 1000)
}
setDataset()
</script>
