Animated CSS Checkmark Design

How can I create an animated Check-mark using CSS with SVG animation? I attempted the following code but it doesn't seem to be working. Any suggestions?

DEMO: https://jsfiddle.net/b7Ln0jns/

CSS:

@import "bourbon";

$color--green: #7ac142;
$curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);

.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: $color--green;
  fill: none;
  animation: stroke .6s $curve 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 $color--green;
  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 .3s $curve .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 $color--green;
  }
}

JS:

<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"/><path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/></svg>
javascriptjqueryhtmlcss

Answer №1

If you are utilizing a css file, the scss must be converted to css.

Take a look at this demonstration:

.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;
  }
}
<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"/>
  <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
</svg>

SASS & SCSS Information:

Sass is an enhancement of CSS3 that introduces nested rules, variables, mixins, selector inheritance, and more. It can be translated into standard CSS using a command line tool or web-framework plugin.

There are two syntaxes in Sass. The newer primary syntax (SCSS) is a superset of CSS3 and every valid CSS3 stylesheet is also valid SCSS. SCSS files use the extension .scss.

The older syntax, known as the indented syntax (or Sass), is intended for those who prefer a concise format over similarity to CSS. Instead of brackets and semicolons, it uses indentation to specify blocks. While no longer the main syntax, support for the indented syntax will continue. Files using the indented syntax have the extension .sass.

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

Sending blank information via Ajax request

I've been attempting to perform an AJAX post to my Express API. My expectation was to receive {user:Todd} in the data object, but whenever I attempt to log the request body, it appears empty. $.ajax({ url: '/api/test', type: 'POST ...

jquerynode.jsajaxexpress

The print preview displays a single div in an incorrect location

I have successfully created a javascript plot and wanted to incorporate a legend that overlaps the plot. Unfortunately, the function I used does not support directly overlapping legends, but it does allow for placing the legend in a separate div. To work a ...

javascripthtmlcss

Problem with JavaScript in Internet Explorer 8

To ensure a consistent bottom background at all times on the page, I devised a method to determine whether or not the bottom part needed to be pushed down based on the window height and main content height. However, I encountered an issue when the content ...

javascriptinternet-explorer

creating a fresh window using AJAX in Ext JS

While I know there may be similar questions out there, the details of my situation are unique. I'm facing an issue with building a new window using ExtJS, starting from a pre-existing grid. The goal is to populate this new window with references to el ...

javascriptajaxextjsextjs4

Tips for capturing all mobile events in Angular

Trying to capture all mobile events like touch and swipe, I have added event listeners at the document level: document.addEventListener('tap', trackTouchActivity, false); document.addEventListener('swipe', trackTouchActivity, false ...

javascriptangularjsmobile

Is there a way to identify the browser version that is being used?

I've been on the lookout for a specific code snippet that can help me identify whether the user visiting my website is using Firefox 3 or 4. Thus far, I have only come across code to determine the type of browser without indicating the version. Is th ...

javascriptbrowserversionbrowser-detection

Is it possible to generate an HTML element by utilizing an array of coordinates?

I have a set of 4 x/y coordinates that looks like this: [{x: 10, y: 5}, {x:10, y:15}, {x:20, y:10}, {x:20, y:20}] Is there a way to create an HTML element where each corner matches one of the coordinates in the array? I am aware that this can be done usi ...

javascripthtmlcss

Bookshelf.js has implemented a new feature where it automatically encrypts passwords with bcrypt every time data is updated

My User Model is var Bookshelf = require('../../db').bookshelf; var bcrypt = require('bcrypt'); var Promise = require('bluebird'); var Base = require('./../helpers/base'); // Custom user model var Custom_User_Mod ...

javascriptnode.jsexpressbcryptbookshelf.js

tips for replacing external js files with local js files

I'm attempting to connect an onclick function to a button, but the button is being generated by a plugin that loads the HTML from an external source I cannot control. As someone new to jQuery, any help on this matter would be greatly appreciated. Be ...

jqueryajax

Is it feasible to utilize VAST for delivering HLS streams? Can m3u8 files be incorporated into VAST tags for delivery?

We are integrating a video player that supports VAST pre-roll, mid-roll, and post-roll video ads. I'm wondering if it's feasible to include m3u8 files in VAST tags? I've reviewed the vast specification and examples, but haven't come ac ...

javascripthtmladsvast

The result of the AJAX GET request is not defined

Despite seeing the response data in the browser's developer tool network tab, my AJAX GET response is showing as undefined. The AJAX request code I am using is as follows: $.ajax({ url: "https://api.leroymerlin.it/product-api-v2/v1/allStoreS ...

jqueryjsonajax

"Customizing the website's font: A step-by-step guide to replacing the default Roboto font with a custom font

Despite my efforts to globally override the font, I am still encountering instances where the Roboto font is not being replaced, particularly on MUI select and autocomplete components. import { createTheme } from '@material-ui/core/styles'; // A ...

cssreactjsmaterial-ui

Tips for setting an identification value within mongodb?

Currently, my focus is on utilizing node.js and mongoose. I am in the process of developing a REST API to showcase my User model: var userSchema = new Schema({ _id: {type:Number}, username: {type:String}, age: {type:Number}, genre:{type: Number,ref:&a ...

javascriptnode.jsmongodbexpressmongoose

The cloning process is functioning properly, however, I am unable to replicate it via ajax using jQuery

Using jQuery to clone elements is functioning as expected. Here's an example: $("#treeFile" > ul:first > li:first ul > *).clone().appendTo("#dummyTree"); However, I encountered an issue when trying to send the cloned element via a POST Ajax ...

jquery

Executing a TypeORM query with a distinct clause that ignores case sensitivity

I am attempting to construct a TypeORM query builder that pulls data from a postgresql database to retrieve all unique names. Here is how my query currently looks: names = await this._context.manager .getRepository(Names) .createQueryBuilde ...

javascriptnode.jspostgresqltypeorm

Utilize JavaScript/jQuery to implement a prompt for saving downloaded files

Is it possible to use javascript or jquery to configure the setting mentioned above (Ask where to save each file before downloading)? ...

javascriptjquery

Ways to incorporate text using css within a textarea?

I want to include an image on my webpage using the following CSS: { background-image: url(../images/icon_new_reset.png); background-repeat: no-repeat; } Is there a way to provide alternative text or overlay text on this background image? ...

css

Encountering an Issue when Registering New Users in Database using Next.js, Prisma, and Heroku

Currently, I am immersed in my inaugural full-stack app development project, which is aligning with an online course. Unfortunately, I have encountered a major stumbling block that has persisted despite hours of troubleshooting. The issue arises when I try ...

javascriptherokunext.jsprismaheroku-postgres

Updating the jQuery AJAX URL dynamically based on user input in a form submission

Exploring the world of AJAX and form submission, I find myself in need of assistance. My webpage is designed to display real-time stock market data, updating fields with the latest price, change, high, low, and more. I am currently attempting to modify th ...

javascriptjqueryajax

Incorporate an assortment of facial features into BufferGeometry using three.js

If I have a BufferGeometry, I can easily assign its vertices using an array of type Float32Array with the following code snippet: geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) ); However, is there a way to set the f ...

javascriptthree.jsgeometryvertices