Warning: Steem witnesses executed a hard fork on 2020-05-20, seizing 23.6M STEEM from 65 accounts. The funds were transferred to an account named @community321, the ownership (and intentions) of which have not been revealed. The witnesses claim to have been targeting accounts which defended against a hostile takeover in early March, but at least 2 accounts on the list have been inactive for over 4 years.

Coverage:
- Decrypt.io: Steem network to seize $5 million from its own users
- SteemPeak.com: Official Announcement by @softfork22888
- GitHub.com: view steemd HF23 changes

What you can do:
- Send exchanges a notice of the pending class action lawsuit.
- Switch to HIVE, the community-led fork. Visit Hive.blog and Hiveblocks.com.

Bootstrap + jQuery: How to Spinner by tomoyan

View this thread on steempeak.com
· @tomoyan ·
$9.54
Bootstrap + jQuery: How to Spinner
## I am a spinner...
![ezgif.com_gif_maker.gif](https://images.ecency.com/DQmTzd1gBhcBhoiyyfRZc8q2CutS7NPLDqfNbBTvskvkEHe/ezgif.com_gif_maker.gif)

**Border spinner** to be exact. I just spin and spin and spin, all day every day to make you think that I am working hard and loading something special for you.
That is just what **YOU** think, but I am not.
I am just a spinner... 👇
```
    <div class="d-flex justify-content-center p-5" style="height: 100px;">
        <div id="spinner-preloader">
            <div class="spinner-border" style="width: 15rem; height: 15rem;" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
    </div>
```
That is it. 
But wait, do I look ugly? 👇
![2.png](https://images.ecency.com/DQmNUg4ZpXqoxGyPtcbFfJezWbvHYP4S3X8LhKp5zekMCL6/2.png)

"**Loading...**" but actually, I am not loading anything because I was told to say it. 
```
<span class="sr-only">Loading...</span>
```
Does this make me a lair 🙄 I am not even spinning.
No, just missing this style sheet 👇
```
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
```
With this CSS, I look like a real spinner.
![3.png](https://images.ecency.com/DQmRZBkPujpLnx778jWSZgywYqAwp3wy6HMr9MphpGpRoZd/3.png)

## But am I spinning too much?
I should go away...
Just add this jQuery.
```
    <script type="text/javascript">
        $(window).on('load', function() {
            $('#spinner-preloader').delay(1000).fadeOut(1000);
    });
    </script>
```
![ezgif.com_gif_maker_1_.gif](https://images.ecency.com/DQmWszZgyQXju2KZzni172WGZhCRCkCUBzmp3oy7cJXXacU/ezgif.com_gif_maker_1_.gif)

This jQuery is making the spinner to fade out slowly 
**$('#spinner-preloader').delay(1000).fadeOut(1000);**

when the page is loaded.
**$(window).on('load', function() {**

## Not working?
You probably need jQuery.
```
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
```

## But can I show you something?
So that I am not just a one-trick pony? 👇
```
$('#image-loader').hide().delay(1500).fadeIn(1000);

<div class="text-center">
	<img id="image-loader" src="https://media.riffsy.com/images/49bfa4531f842cdd4df1e9dca6ac588b/tenor.gif" />
</div>
```
Actually it is not a pony. It is a bear...

![ezgif.com_gif_maker_2_.gif](https://images.ecency.com/DQmcPQjnR4cQJpZ2xw1jZ7BvCUenm4qcpKuWupTyjUToXLp/ezgif.com_gif_maker_2_.gif)

This meands that dancing bear is hiding when the page is loaded but slowly fades in after spinner fades out.
**$('#image-loader').hide().delay(1500).fadeIn(1000);**

## Hello... h, hellooo...?
Did I lose you? Did you fade out? That is okay I am confused too 🤣 
Just copy and save it as demo.html or something.
Then open it in your browser, see how it works.
```

<!doctype html>
<html>
<head>
    <title>Spinner Demo</title>

    <!-- bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>

<body>

    <script type="text/javascript">
        $(window).on('load', function() {
            // grab this spinner-preloader html and hide it
            $('#spinner-preloader').delay(1000).fadeOut(1000);

            // grab this image-loader html and make it dance
            $('#image-loader').hide().delay(1500).fadeIn(1000);
    });
    </script>

    <!-- big spinner -->
    <div class="d-flex justify-content-center p-5" style="height: 100px;">
        <div id="spinner-preloader">
            <div class="spinner-border" style="width: 15rem; height: 15rem;" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
    </div>

    <!-- dancing bear image in the middle-->
    <div class="text-center">
        <img id="image-loader" src="https://media.riffsy.com/images/49bfa4531f842cdd4df1e9dca6ac588b/tenor.gif" />
    </div>

</body>
</html>
```

## But can I **REALLY** show you something?
![real_demo.gif](https://images.ecency.com/DQmbyJ2YUAZhYiSsuTzodnzou1XedUP7q9ofry8QpxDWjF5/real_demo.gif)
This is how I actually spin and load some data using the same simple Bootstrap + jQuery trick.

You can try it here.
https://floating-meadow-28045.herokuapp.com/blurt/

But actually, dancing bear looks better than using spinners 😂 😂 😂 
<center>
    [Get Rewarded For Browsing! Are you Brave?](https://brave.com/tom490)
    [<img src="https://img.esteem.app/be00j8.png">](https://brave.com/tom490)
    [![happy tears](https://images.ecency.com/DQmUfaVp5UQvASdTyyLrNiBdGB7NxQfxE2wBpNivcDUkCfe/h.gif)](https://tomoyan.github.io/)
    ➡️ [Website](https://tomoyan.github.io)
    ➡️ [Twitter ](https://twitter.com/tomoyanTweet)
</center>
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
properties (23)
post_id88,019,452
authortomoyan
permlinkbootstrap-jquery-how-to-spinner
categorycodeonsteem
json_metadata{"tags":["codeonsteem","bootstrap","javascript","mini","marlians","dblog"],"image":["https:\/\/images.ecency.com\/DQmTzd1gBhcBhoiyyfRZc8q2CutS7NPLDqfNbBTvskvkEHe\/ezgif.com_gif_maker.gif","https:\/\/images.ecency.com\/DQmNUg4ZpXqoxGyPtcbFfJezWbvHYP4S3X8LhKp5zekMCL6\/2.png","https:\/\/images.ecency.com\/DQmRZBkPujpLnx778jWSZgywYqAwp3wy6HMr9MphpGpRoZd\/3.png","https:\/\/images.ecency.com\/DQmWszZgyQXju2KZzni172WGZhCRCkCUBzmp3oy7cJXXacU\/ezgif.com_gif_maker_1_.gif","https:\/\/images.ecency.com\/DQmcPQjnR4cQJpZ2xw1jZ7BvCUenm4qcpKuWupTyjUToXLp\/ezgif.com_gif_maker_2_.gif","https:\/\/images.ecency.com\/DQmbyJ2YUAZhYiSsuTzodnzou1XedUP7q9ofry8QpxDWjF5\/real_demo.gif","https:\/\/img.esteem.app\/be00j8.png","https:\/\/images.ecency.com\/DQmUfaVp5UQvASdTyyLrNiBdGB7NxQfxE2wBpNivcDUkCfe\/h.gif"],"links":["https:\/\/floating-meadow-28045.herokuapp.com\/blurt\/","https:\/\/brave.com\/tom490","https:\/\/tomoyan.github.io\/","https:\/\/tomoyan.github.io","https:\/\/twitter.com\/tomoyanTweet"],"app":"steemit\/0.2","format":"markdown"}
created2020-10-15 14:22:51
last_update2020-10-15 14:22:51
depth0
children0
net_rshares28,021,828,832,661
last_payout2020-10-22 14:22:51
cashout_time1969-12-31 23:59:59
total_payout_value4.951 SBD
curator_payout_value4.584 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length5,174
author_reputation63,581,875,354,722
root_title"Bootstrap + jQuery: How to Spinner"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (43)