Creative Border Stylings with CSS

Can anyone help me create a CSS transition on a fieldset to turn it into a checkmark circle?

.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2; 
  stroke-miterlimit: 10;
  stroke: #7ac142; 
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark {
  width: 56px;
  height: 56px;
  border-radius: 50%; 
  display: block;
  stroke-width: 2; 
  stroke: #fff;
  stroke-miterlimit: 10; 
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px #7ac142; 
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48; 
  stroke-dashoffset: 48;
   animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #7ac142;
  }
}
<fieldset style=" border: 1px solid #7ac142; border-radius: 10px; ">
    <legend>
        <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
            <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"></circle>
            <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"></path>
        </svg>
    </legend>
    <div class="span12 space-3" style=" font-weight: bold; font-size: 18px; text-align: center; ">
        Hello World!
    </div>
</fieldset>

javascriptjqueryhtmlcss

Answer №1

Following the instructions:

To implement the shape state change, modify the CSS by creating a new class called .complete and applying it to the shape element instead of using the :hover pseudo-class within the svg-wrapper rule:

.svg-wrapper .shape.complete { /* Replaces .svg-wrapper:hover .shape */
  stroke-width: 2px;
  stroke-dashoffset: 0;
  stroke-dasharray: 760;
}

Incorporate JavaScript to verify that the shape is present in the DOM structure and then trigger the state change by adding the class complete to the shape element:

(function checkShape() {
  var svgShape = document.querySelector('.svg-wrapper .shape');
  if (!svgShape) {setTimeout(checkShape, 50); return;}
  svgShape.classList.add('complete');
})();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to store angular 2 table information generated using ngFor

I am currently working on a project where I need to create an editable table using data retrieved from the back end. My goal now is to save any updated data. I attempted to use formControl, but it seems to only save the data in the last column. Below is a ...

javascriptangular

The image displaying "Loading" fails to appear

My webpage includes a div styled with the following CSS: .modal { display: none; position: fixed; z-index: 1000; top: 0; left: 0; height: 100%; width: 100%; background: rgba( 255, 255, 255, .35 ...

jquerycssajax

Chaining multiple promises in Node JS

I am currently facing an issue with properly chaining Promises in my node JS api server: app.post( "/api/tasks", async function (_req, res) { const newArray = [{ MyTasks: [] }]; const getOne = async (owner, taskID) => { retu ...

javascriptnode.js

Utilize the onClick Event to Trigger Function with an Array in ReactJS

Every time I attempt to pass an array as a value to a function by clicking on a div, I encounter the error below: Uncaught Invariant Violation: Expected onClick listener to be a function, instead got a value of object type. If passing an array to a fun ...

javascriptreactjs

What are the steps to implement a personalized material design theme on a Bootstrap component?

Utilizing Angular Material design components across my entire website for a cohesive look and feel. (Angular Material Design) A custom theme has been crafted: $mdThemingProvider.theme('default') .primaryPalette('red', { ...

cssangularjstwitter-bootstrapmaterial-designangular-material

The initial invocation of the JavaScript function did not run

In my Grails view, I have a script tag set up like this: <script type="text/javascript"> /* the first setInterval */ setInterval( function() { console.log("Test..."); }, 5000 ); setInterval( ...

javascriptgrails

Avoid going through divs repeatedly in Javascript

Here is the code snippet I am working with: function loopCalendar() { // function to loop through calendar elements var labels = loopDivs('calendarDiv', 'btn_'), // loop through calendar buttons arrows = loopDivs('cale ...

javascriptajaxloops

I have an array that requires mapping objects and pushing into a new array

Here is the Array that needs to be processed: [ { "batchno": "B-PI1-1", "unitId": 341, "productName": "Bar Soap", "productProfileId": 3950, "qty&qu ...

javascript

Finding the timestamp of a blog post in Blogger

Is it possible to retrieve the date and time of a post on Blogger using JavaScript or jQuery? ...

javascriptjqueryblogsblogger

Replace .Mui-disabled (or any other pseudo-classes/states) in the MUI v4.1.X theme with custom styling

How can I globally override the default grey background color for disabled items in Material-UI v4.1.x? I know how to do it for specific components like MuiMenuItem, but I'd prefer a solution that doesn't require me to add overrides for each indi ...

javascriptreactjsmaterial-ui

Using Material UI Typography and Media Queries for Responsive Design

Is there a way to make the variant prop in the typography component dynamic based on different screen widths? Any suggestions or feedback would be greatly appreciated. import { useTheme, useMediaQuery } from "@material-ui/core"; const Home = () => { ...

javascriptreactjsmaterial-uimedia-queries

What is the process of parsing an array with $.parseJSON()?

In my test.php file, I receive an array from a MySQL query. $rows = Array ( [0] => Array ( [name] => nikhil ) [1] => Array ( [name] => akhil )) I then convert this array into a JSON format string and echo it out. $jsonstring = json_encode($r ...

javascriptphpjqueryarraysjson

Connections while posting

Hello, I am new to web design and have a question about my site links. Currently, my links are as follows: <li id="active"><a href="Index.html">Home</a></li> <li><a href="Lakes.html">Where to Fish</a></li> ...

htmlcss

Tips for manipulating the DOM: Pushing existing elements when new ones are dynamically created with JavaScript

I have a pre-existing DOM element (let's say a div) and I am using JavaScript, specifically React, to create a new element - another div which serves as a sidebar. The goal is for the sidebar to seamlessly shift the previous element without overlappin ...

javascripthtmlcssreactjs

Launching Toasts with Bootstrap 4

I've been working with toasts in Bootstrap 4 and one thing has been bothering me: When I initialize the toast like this: <div class="toast my-3" data-delay="2500"> <div class="toast-header text-dark"> //fill this later &l ...

javascriptbootstrap-4

Is it possible to generate various random outcomes within a for loop?

I have a challenge of creating 64 squares with unique background colors. I've made progress, but so far I can only generate one random color. function getRandomColor() { return Math.floor(Math.random()*16777215).toString(16); } $(function(){ ...

javascriptjquery

Steering clear of using tables for structuring HTML 5 pages

My question is straightforward: how can I avoid using tables for layout in a proper way? I have encountered issues with using DIVs and floating them left as sometimes, when the browser window is stretched, all the divs stack on top of each other... In my ...

csshtml

How does the method ~[Array].indexOf(key) function?

Currently, I am utilizing and customizing the MVC sample found in the Express.js repository. Within one of the modules, there is a JavaScript concept that I am unfamiliar with. The goal is to loop through keys on an object and exclude certain ones that ar ...

javascriptnode.jsexpressoperatorsbit-manipulation

Having trouble choosing a value from an MVC dropdown using jQuery?

I'm currently utilizing this approach to choose a value from an MVC dropdown menu. $("#orgCreate #country option:contains(Sri Lanka)").attr('selected', 'selected'); Initially, this works fine. However, upon attempting to reselect ...

jqueryasp.net-mvcmodel-view-controller

transmitting comfort through events

To enhance my application, I am working on publishing a solace message to a topic and then passing it along to another part of the app for further processing using events. This entire process is happening within a single node.js process. While I understand ...

javascriptnode.jseventssolace