Completion status of circle loader: 100%

I am currently facing some challenges getting the circle loader to work correctly. Although I can handle basic animations, the code I found on CodePen is a bit more advanced than what I am used to. I am using it as a learning experience to understand how it works.

My goal is to control the extent to which the loader goes around the circumference of the circle. For example, having it stop at 68% or 98%. However, I have been unsuccessful so far in identifying the property or value that determines this.

I have tried adjusting the keyframes in the right loader class and the transform-origin property, but with no success. The code provided below:

#circle-loader-wrap {
  overflow: hidden;
  position: relative;
  margin-top: -10px;
  width: 200px;
  height: 200px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1) inset;
  background-color: blue;
  border-radius: 200px;
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}

#circle-loader-wrap:after {
  content: '';
  position: absolute;
  left: 15px;
  top: 15px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background-color: green;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

#circle-loader-wrap div {
  overflow: hidden;
  position: absolute;
  width: 50%;
  height: 100%;
}

#circle-loader-wrap .loader {
  position: absolute;
  left: 100%;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 1000px;
  background-color: pink;
}

#circle-loader-wrap .left-wrap {
  left: 0;
}

#circle-loader-wrap .left-wrap .loader {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  transform-origin: 0 50% 0;
  -webkit-transform-origin: 0 50% 0;
  animation: loading-left 20s infinite linear;
  -webkit-animation: loading-left 20s infinite linear;
}

#circle-loader-wrap .right-wrap {
  left: 50%;
}

#circle-loader-wrap .right-wrap .loader {
  left: -100%;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  transform-origin: 100% 50% 0;
  -webkit-transform-origin: 100% 50% 0;
  animation: loading-right 20s infinite linear;
  -webkit-animation: loading-right 20s infinite linear;
}

@keyframes loading-left {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

@-webkit-keyframes loading-left {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(180deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
  }
}

@keyframes loading-right {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

@-webkit-keyframes loading-right {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
  }
}
<div class="container mt-5">
  <div class="row">
    <div class="col-3">
      <div id="circle-loader-wrap">
        <div class="left-wrap">
          <div class="loader"></div>
        </div>
        <div class="right-wrap">
          <div class="loader"></div>
        </div>
      </div>
    </div>
  </div>
</div>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you're looking to achieve a specific animation effect, check out the snippet below:

To make things clearer, I've included explanations within the code comments that correspond to the CSS rules responsible for the animations.

If there's anything that still seems confusing, feel free to drop a comment.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
    #circle-loader-wrap {
        overflow: hidden;
        position: relative;
        margin-top: -10px;
        width: 200px;
        height: 200px;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1) inset;
        background-color: blue;
        border-radius: 200px;
        transform: rotate(180deg);
    }

    #circle-loader-wrap:after {
        content: '';
        position: absolute;
        left: 15px;
        top: 15px;
        width: 170px;
        height: 170px;
        border-radius: 50%;
        background-color: green;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    #circle-loader-wrap div {
        overflow: hidden;
        position: absolute;
        width: 50%;
        height: 100%;
    }

    #circle-loader-wrap .loader {
        position: absolute;
        left: 100%;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 1000px;
        background-color: pink;
    }

    #circle-loader-wrap .left-wrap {
        left: 0;
    }

    #circle-loader-wrap .left-wrap .loader {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        transform-origin: 0 50% 0;
        animation: loading-left 5s infinite linear;
    }

    #circle-loader-wrap .right-wrap {
        left: 50%;
    }

    #circle-loader-wrap .right-wrap .loader {
        left: -100%;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        transform-origin: 100% 50% 0;
        animation: loading-right 5s infinite linear;
    }

    @keyframes loading-left {
        0% {
            transform: rotate(0deg);
        }
        25%, 100% {
/*          the following is for the second half of the circle */
/*          180deg means one half of the cicle or 50% of the cicle */
/*          So, 1% is gonna be 180/50 = 3.6deg */
/*          If you want 68%, then you have 18% left for the second half of the circle */
/*          To get 18%: 18x3.6 = 64.8deg */
            transform: rotate(64.8deg);
/*          Note: The transformation will happen between 25% and 50% of the total time which is 5 seconds in this case; So, it's gonna take 1.25 seconds. */
/*          In other words, it will take the same amount of time as for the first half of the circle which will make the transformation in the second half appear to be slower because it has the same time to cover a much shorter distance */
/*          Between 50% and 100% nothing happens. */
/*          That's your "pause" in this animation although technically it's not a pause. */
        }
    }

    @keyframes loading-right {
        0%, 25% {
            transform: rotate(0deg);
        }
        50%, 100% {

        }
    }
</style>

<div class="container mt-1">
    <div class="row">
        <div class="col">
            <p>68% in this case:</p>
                <div id="circle-loader-wrap">
                    <div class="left-wrap">
                        <div class="loader"></div>
                    </div>
                    <div class="right-wrap">
                        <div class="loader"></div>
                    </div>
                </div>
                <p>The comments next to the corresponding css rules show how to adjust.</p>
            </div>
        </div>
    </div>
</div>

Just a quick note: I removed the vendor prefixes as they are no longer necessary for these CSS rules.

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

Adjusting the parent with CSS transitions to perfectly align with the final height of a

Jade example div.parent div.child1 div.child2 Upon initial load, Child1 is visible. Clicking will hide Child1 and make Child2 visible. Another click will reverse this action. During the transition between hiding and showing the children, there s ...

htmlcsscss-transitionscss-animations

What is the best way to delete HTML classes that were generated by a function?

Currently, I'm immersed in the Etch A Sketch project as part of my journey through The Odin Project. Using DOM manipulation, I successfully created a grid and displayed it on the screen. Now, my aim is to allow users to resize the grid by removing the ...

javascripthtmlcssdom

What is the best way to place an icon in the lower right corner of a design

I have encountered an issue while building the testimonial section below. The problem arises when the amount of text in each block is not the same, causing the quote icon to be displayed improperly in the bottom right corner. Sometimes, it even extends out ...

htmlcssbootstrap-4

How can I retrieve JSON data from an AJAX request on an HTML page?

How can I display my JSON data on an HTML page using this JavaScript code? $.ajax({ url : 'auth.json', type: "GET", dataType : "jsonp", success: function(result) { $.each(result, function(i, v) { // Loop through each record in ...

javascriptjqueryhtmlajaxjson

Removing nested divs using JavaScript

My website has a nested div structure which contains multiple child divs. Here is an example of the div structure: <div id="outside-one"> <div class="inside" id="1"></div> <div class="inside" id="2"></div> <div ...

javascriptjqueryhtmlcss

Support for Chrome in Angular 8

Can someone please advise on the minimum version of Google Chrome that is supported by Angular 8? Additionally, I am looking for a way to prompt users to update their Chrome browser if it doesn't meet the required version. My Angular application seems ...

javascripthtmlangular

Position the div alignment to the top within the table cell

I'm having trouble aligning the div under the header to the right. Here is my HTML code and a photo for reference: HTML Code: <td> <div class="schedule-content"> <div class="timestamp& ...

htmlcss

When HTML/JS code is utilized, the submit button or image should function to open the same page as

In addition to the left and right mouse buttons, you also have a middle mouse button. If you click on an image or hyperlink with this middle mouse button while browsing any website, it will open a new window in the background. Now, I want to achieve a sim ...

javascripthtmlformssubmit

The method for connecting the width of a panel to the height of the viewport in Ext Js

I'm looking to automate the adjustment of a panel's height based on the viewport's height using Ext js. Although achievable using listeners, I believe utilizing Ext js variable binding would be more efficient. However, I've encountered ...

javascriptcssextjsextjs6-classicextjs6.5

Adjust the font size within the grid layout

I'm utilizing the grid system to display 7 small images with a number next to each one, just like in this example. In my initial attempt, I didn't use the grid system, which made the process quite complex and time-consuming, taking me around 60 t ...

htmlcssbootstrap-4

What is causing vertical-align:middle to not function in the same way as text-align:center?

Is there a reason why vertical-align:middle doesn't seem to work as easily as text-align:center? It's frustrating that it's so challenging to get it right. I'm curious why the folks at W3C haven't created something like text-alig ...

htmlcss

get the queryset for a dropdown menu item in Django

Currently, I am in the process of creating an HTML calendar page with a dropdown feature to select different months. Accessing this calendar page can be done through the navigation bar set up in my base.html base.html - Direct access to the calendar page. ...

djangohtmlbootstrap-4

Picture goes missing from slideshow

I am currently using a CSS + Javascript slideshow on my website, inspired by an example from the W3Schools website. Here is the code I have adapted for my web application: $(document).ready(function() { var slideIndex = 1; function showSlides(n) { ...

javascriptjqueryhtmlcssslideshow

Bootstrap grid with 4 columns featuring text of varying lengths and styles

I currently have a layout on my webpage that consists of four columns. Each column includes a logo, an <h2> tag, and a <p> tag. My issue is with aligning the paragraphs horizontally so they match consistently. Whenever the text in the <h2&g ...

twitter-bootstrapgridbootstrap-4

Using Responsive Design with Bootstrap and Media Queries

As a beginner in front-end development, I have recently learned about media queries and their functionality. Having previously studied Bootstrap, I can't help but wonder if media queries are actually necessary. After all, Bootstrap seems to offer simi ...

csstwitter-bootstrapwebfrontendmedia-player

AngularJS static list with dynamically changing content

Seeking inspiration on creating an AngularJS information monitor with a maximum of 6 rows. The display should show new rows at the top, pushing out the oldest row from the bottom when there are already 6 rows visible. Rows can also disappear unexpectedly. ...

javascriptjquerycssangularjsangularjs-directive

Is there a way to personalize the appearance of a specific page title in my navigation menu?

I'm currently working on customizing the menu of my WordPress theme to display a different color for the active page name. Although my CSS code works well for all page names except the current one: .navbar-nav li a { font-family: georgia; fo ...

javascriptjqueryhtmlcsswordpress

Strange Vertical Offset Issue with Custom Fonts in CSS

I have implemented a custom font in my CSS using the following method: @font-face { font-family: 'Gabriola'; src: url('Gabriola.eot'); src: url('Gabriola.eot?#iefix') format('embedded-opentype'), ...

csscross-browserfont-face

What can I do to prevent Masonry from floating all of my grid items to the left?

Is there a way to center justify the masonry grid items? I have noticed that my Masonry layout is aligning all the grid items to the left or justifying them to the left side: <div class="wrap"> <div class="parent grid"> <div class=" ...

jqueryhtmlcssgridmasonry

Can the text value be read and its strings changed?

I need to modify the message inside an H2 element with the code provided below. I want to change the text from No results were found for this query: <em class="querytext"> to "No results were found by hello world!, but the catch is that I cannot di ...

javascripthtmlcss