Breaking News: Grepper is joining You.com. Read the official announcement!

Spinner

conjunction cell answered on March 3, 2022 Popularity 10/10 Helpfulness 1/10

answer Spinner

related spinner

Spinner

Comments(1)

      <div className='loadingSpinnerContainer'>
      <div className='loadingSpinner'></div>
      
      //CSS
      .loadingSpinner {
  width: 64px;
  height: 64px;
  border: 8px solid;
  border-color: #00cc66 transparent #00cc66 transparent;
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
}
@keyframes spin{
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Popularity 10/10 Helpfulness 1/10 Language css

Source: Grepper

Tags: css spinner

Link to this answer
Share Copy Link

Contributed on Mar 13 2022

conjunction cell

0 Answers Avg Quality 2/10

Closely Related Answers

spinner

Comment

<div className='loadingSpinner'></div>


.loadingSpinner {
  width: 64px;
  height: 64px;
  border: 8px solid;
  border-color: #00cc66 transparent;
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
}
@keyframes spin{
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Popularity 10/10 Helpfulness 2/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Mar 16 2022

conjunction cell

0 Answers Avg Quality 2/10

spinner

Comment

from kivy.base import runTouchApp
from kivy.uix.spinner import Spinner

spinner = Spinner(
    # default value shown
    text='Home',
    # available values
    values=('Home', 'Work', 'Other', 'Custom'),
    # just for positioning in our example
    size_hint=(None, None),
    size=(100, 44),
    pos_hint={'center_x': .5, 'center_y': .5})

def show_selected_value(spinner, text):
    print('The spinner', spinner, 'has text', text)

spinner.bind(text=show_selected_value)

runTouchApp(spinner)

Popularity 10/10 Helpfulness 1/10 Language python

Source: kivy.org

Tags: python py

Link to this answer
Share Copy Link

Contributed on Jan 08 2023

Sparkling Skylark

0 Answers Avg Quality 2/10

spinner

Comment

-1

.spinner {
    width: 70px;
    height: 70px;
    border: 8px solid lightblue;
    border-top-color: blue ;
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.spinner>div{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.spinner-dual {
    width: 70px;
    height: 70px;
    border: 8px solid transparent;
    border-top-color: blue;
    border-bottom-color: blue;
    border-radius: 50%;
    animation: spin 1.5s linear infinite;  
}

.spinner-dual>div{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    animation: spin .8s reverse linear infinite;
}

.spinner-fast {
    width: 70px;
    height: 70px;
    border-top: 5px solid blue;
    border-right: 5px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.spinner-fast>div{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    animation: spin 3s linear infinite;
}

.spinner-triple {
    width: 70px;
    height: 70px;
    border: 5px solid transparent;
    border-top-color: blue ;
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.spinner-triple::before {
    content: "";
    border: 5px solid transparent;
    border-top-color: lightskyblue ;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    animation: spin 2s linear infinite;
}

.spinner-triple::after {
    content: "";
    border: 5px solid transparent;
    border-top-color: lightblue;
    border-radius: 50%;
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    animation: spin 1s linear infinite;
}

.spinner-triple>div{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    animation: spin 1.5s linear infinite;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

Popularity 10/10 Helpfulness 1/10 Language whatever

Source: raw.githubusercontent.com

Tags: spinner

Link to this answer
Share Copy Link

Contributed on Mar 03 2022

Thankful Tapir

0 Answers Avg Quality 2/10

Spinner

Contents

More Related Answers

Spinner

Closely Related Answers

spinner

spinner

spinner

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.