Implement a custom CSS-animation in a form

Anvil Q&A
1

I would like a custom CSS animation playing in a form below a text-box, but I don’t know if this is even possible.

This is the CSS I want to use:

<div class="loadingio-spinner-bean-eater-k5w0lzaoxy"><div class="ldio-fr67e2978f">
<div><div></div><div></div><div></div></div><div><div></div><div></div><div></div></div>
</div></div>
<style type="text/css">
@keyframes ldio-fr67e2978f-1 {
    0% { transform: rotate(0deg) }
   50% { transform: rotate(-45deg) }
  100% { transform: rotate(0deg) }
}
@keyframes ldio-fr67e2978f-2 {
    0% { transform: rotate(180deg) }
   50% { transform: rotate(225deg) }
  100% { transform: rotate(180deg) }
}
.ldio-fr67e2978f > div:nth-child(2) {
  transform: translate(-15px,0);
}
.ldio-fr67e2978f > div:nth-child(2) div {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 120px;
  height: 60px;
  border-radius: 120px 120px 0 0;
  background: #2196f3;
  animation: ldio-fr67e2978f-1 1s linear infinite;
  transform-origin: 60px 60px
}
.ldio-fr67e2978f > div:nth-child(2) div:nth-child(2) {
  animation: ldio-fr67e2978f-2 1s linear infinite
}
.ldio-fr67e2978f > div:nth-child(2) div:nth-child(3) {
  transform: rotate(-90deg);
  animation: none;
}@keyframes ldio-fr67e2978f-3 {
    0% { transform: translate(190px,0); opacity: 0 }
   20% { opacity: 1 }
  100% { transform: translate(70px,0); opacity: 1 }
}
.ldio-fr67e2978f > div:nth-child(1) {
  display: block;
}
.ldio-fr67e2978f > div:nth-child(1) div {
  position: absolute;
  top: 92px;
  left: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f6eb1e;
  animation: ldio-fr67e2978f-3 1s linear infinite
}
.ldio-fr67e2978f > div:nth-child(1) div:nth-child(1) { animation-delay: -0.67s }
.ldio-fr67e2978f > div:nth-child(1) div:nth-child(2) { animation-delay: -0.33s }
.ldio-fr67e2978f > div:nth-child(1) div:nth-child(3) { animation-delay: 0s }
.loadingio-spinner-bean-eater-k5w0lzaoxy {
  width: 200px;
  height: 200px;
  display: inline-block;
  overflow: hidden;
  background: none;
}
.ldio-fr67e2978f {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio-fr67e2978f div { box-sizing: content-box; }
</style>

I guess this needs to be in the theme.css-file, but how can I make this appear within a certain position within a specific form?

2

I think you want to put that code into a custom HTML form/component: Anvil Docs | Custom HTML Forms

Then there are some potential hiccups, but that should get you started.

1 Like
3

Please have a look at this: Progressbar component (again)

Hope it helps

3 Likes
4

I use the Animation module of Anvil Extras for my animations.

2 Likes