CSS border time animation

Question

I've an icon with a border on my login page:

.border {
    position: absolute;
    font-size: 35px;
    color: var(--main-color);
    display: flex;
    text-align: center;
    line-height: 90px;
    border: 4px solid;
    width: 90px;
    border-radius: 100%;
    height: 90px;
    align-items: center;
    justify-content: center;
    margin: auto;
    padding: 5px;
    left: 0;
    right: 0;
    top: 20px;
    background: #ffffff;
}

<div class="border">✔</div>

I'm looking now for a way to add the border around with an growing animation because I've a timeout for login. The timeout is 60 seconds (60000 mil. sek.) so the border should be expanding from the right to the left all the round along. Is this possible?

Update

.border {
    content: '';
    position: absolute;
    font-family: 'ETModules';
    font-size: 60px;
    color: var(--main-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    line-height: 90px;
    width: 98px;
    height: 98px;
    border-radius: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: auto;
    padding: 5px;
    left: 0;
    right: 0;
    top: 20px;
    z-index: 9998;
    background: #ffffff;
    --percentage: 100deg;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff)) content-box no-repeat, conic-gradient(black var(--percentage, 0), transparent var(--percentage, 0)) border-box;
    background: -webkit-linear-gradient(#ffffff, #ffffff) content-box no-repeat, conic-gradient(black var(--percentage, 0), transparent var(--percentage, 0)) border-box;
    background: -o-linear-gradient(#ffffff, #ffffff) content-box no-repeat, conic-gradient(black var(--percentage, 0), transparent var(--percentage, 0)) border-box;
    background: linear-gradient(#ffffff, #ffffff) content-box no-repeat, conic-gradient(black var(--percentage, 0), transparent var(--percentage, 0)) border-box;
    -webkit-box-shadow: 0 0.2rem 0.4rem 0 rgba(0, 0, 0, .2);
    box-shadow: 0 0.12rem 0.4rem 0 rgba(0, 0, 0, .2);
}

<div class="border">✔</div>

I've used now the duplicate question / answer but the "border" is thicker then 5px. Any idea how to fix this?

Temani can you please check this? It‘s really important because I need to deploy this tonight — Mr. Jo, Jul 27 '19 at 18:02
I've created something with svg and js, here is codepen https://codepen.io/nenadv91/pen/KONRQZ?editors=0010 — Nenad Vracar, Jul 27 '19 at 18:08
@NenadVracar Thanks for your answer. Unfortunately I can't change the HTML because this is a component of a framework :( — Mr. Jo, Jul 27 '19 at 18:49
I already checked and I give you a duplicate question with at least 3 method to achieve what you want and you have considered the one with less support ... — Temani Afif, Jul 27 '19 at 19:29
Please check my updated question. The solution works but the width of the border is different... There is nothing about the width in your answer. — Mr. Jo, Jul 27 '19 at 19:34
you didn't use *my* answer. In my answer the width of the border is controlled by border and in the code you used it's controled by padding — Temani Afif, Jul 27 '19 at 19:44
@TemaniAfif I've used your code now. But how can it let it go the other direction and how can I fill it with JS in 60 seconds? So like a timeout? — Mr. Jo, Jul 28 '19 at 08:06
ifyou want something with JS consider this answer: https://stackoverflow.com/a/55519869/8620333 ... simply add a circle overlay above it to only show the borders — Temani Afif, Jul 28 '19 at 08:23

CSS border time animation

0 Answers0